[16-3] table のセルを連結しよう(colspan属性, rowspan属性)

table のセル(th td)を連結する方法です。
このように thやtdを連結させて表をわかりやすくします。

これは↑プレビュー画像です。クリックでサンプルHTMLが開きます(別ウィンドウで開く) 。

使用する属性 <th colspan="数字"> 〜 </th> ←thの縦列を連結=横方向に連結します
<th rowspan="数字"> 〜 </th> ←thの横列(行)を連結=縦方向に連結
<td colspan="数字"> 〜 </td> ←tdの縦列を連結=横方向に連結します
<td rowspan="数字"> 〜 </td> ←tdの横列(行)を連結=縦方向に連結

サンプルのダウンロードはこちら

★上のサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample16-3set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

「colspan」属性で 横方向に連結しよう

まずは、セルを横方向に連結してみましょう。この部分です。
本来ならこの表は、縦列が3つあるべきものですが、最初のth要素2つを連結させています。

サンプルでは、見出しセル th を連結させますが、tdでもソースの書き方は全く同じです。

「col」は「column」の略で縦列のこと。
縦列(col)を1つのセルとしてまとめるため、横方向の連結になりますよ。
(ややこしいですが。colspanとrowspanを取り違えて覚えないようにね。)

サンプルのHTMLソースを見てみましょう。

<table class="sample1">
<caption>新作アイテム価格表</caption>
  <tr>
    <th colspan="2">新作アイテム</th>
    <th>価格</th>
  </tr>
…省略…
</table>

<th colspan="2">と指定する事で
「th要素2つ分を、1つのthとして使う」と指定しています。
数字はまとめるセルの数です。3つをまとめたければ、colspan="3"と書きます。

「rowspan」属性で 縦方向に連結しよう

次は、セルを縦方向に連結してみましょう。この部分です。

2ヶ所連結させてますよ。
最初は2つのセルを1コに、その下は3つのセルを1コにまとめています。

サンプルのHTMLソースを見てみましょう。

<table class="sample1">
<caption>新作アイテム価格表</caption>
  …省略(先ほどの見出しの部分です)…
   <tr>
        <td rowspan="2">Tシャツ</td>
        <td>半袖</td>
        <td>¥3,500</td>
  </tr>
  <tr>
        <td>長袖</td>
        <td>¥5,500</td>
  </tr>
  <tr>
        <td rowspan="3">パンツ</td>
        <td>5分丈</td>
        <td>¥15,000</td>
  </tr>
  <tr>
        <td>7分丈</td>
        <td>¥20,000</td>
  </tr>
  <tr>
        <td>10分丈</td>
        <td>¥22,000</td>
  </tr>
</table>

<td rowspan="2">や<td rowspan="3">と指定する事で
複数のtd要素を、1コにまとめていますね。

rowspanは行を縦方向に連結するため、影響が複数のtrに渡るため、ソースが複雑ですね。
最初にrowspan="2"とした後、次の<tr>〜</tr>の中には、td要素が2つしかなくなってる事が
わかりますね?本来3つあるんですが、先ほど2つ分を1つにまとめられたので、次のtr内は1コ減ってる、というわけです。

次回予告

いかがでしたか?
次回は、カラ(テキスト無し)のセル(th, td)の罫線(border)を非表示にする方法です。
これにはCSSの「empty-cells」を使います。
カレンダーなどで、日にちの数字がないのに枠だけがあって変なとき、このプロパティですっきりさせる事が出来ます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.