ほんっとにはじめての HTML5 と CSS3

今回は、<thead> <tbody> <tfoot> の3つの要素を使ってみましょう。
テーブルの横列（ <tr>要素 ）をグループ化するための要素たちです。

<thead> は「table head」の略。「ヘッダ部分」です。
<tbody> は「table body」の略。「本体部分」です。
<tfoot> は「table foot」の略。「フッタ部分」です。

この3つを使うことで、
・テーブルの構造が明確になるので、コーディング時に編集しやすい。
・テーブルの構造が明確になるので、アクセシビリティ的により良くなる。
ので、簡単なテーブルでは 省略可能ですが、使うほうが正当な書き方なようです。

<table>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</table>

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

下のサンプルは、ブロック分けをした部分に CSSで背景色を分けて付けてみました。

<thead> <tbody> <tfoot> を使ってみよう

<thead> <tbody> <tfoot>いずれも、<tr>〜</tr>を囲むように使います。
サンプルのHTMLはこちら。

<table class="sample1">
<thead>
  <tr>
      <th>エリア</th>
      <th>店舗名</th>
      <th>来店総数</th>
      <th>新規来店</th>
      <th>リピート</th>
  </tr>
</thead>
<tbody>
  <th rowspan="3">A</th>
      <td>渋谷店</td>
      <td>250</td>
      <td>100</td>
      <td>150</td>
  </tr>
  <tr>
      <!--省略-->
  </tr>
</tbody>
<tfoot>
  <tr>
    <th colspan="2">合計</th>
      <td>960</td>
      <td>450</td>
      <td>510</td>
  </tr>
</tfoot>
</table>

<thead> <tbody> <tfoot>それぞれのルール

<thead>は テーブルの中に1つだけしか入れられません。
他の <tbody> <tfoot> よりも前に入ってなければなりません。
<thead>の中に <tr>要素はいくつでも入れられます。

<tbody>は テーブルの中に複数OK。
中に <tr>要素はいくつでも入れられます。

<tfoot>は テーブルの中に1つだけしか入れられません。
中に<tr>要素はいくつでも入れられます。

それと <tfoot> は <tbody> よりも前に置く事が出来ます。プレビューはちゃんと一番下に表示されます。
＊注意：HTML5.1から、<tfoot>要素は caption、colgroup、thead、tbody、tr の各要素の「後方」に配置しなければならないとのことです。

CSSで色分けしてみよう

グループ分けするのは、<table>の構造をわかりやすく、操作しやすくするため。
そして CSSの指定もしやすくなります。

上のサンプルのCSSです。それぞれに背景色を指定してます。
（関係ない部分は省略しています）

table.sample1 thead {
	background: #c7ebc9;
	}
table.sample1 tbody {
	background: #ffc;
	}
table.sample1 tfoot {
	background: #86bd7e;
	color:#fff;
	}

<tbody>を複数使ってみたサンプル

<tbody>要素は 1つのテーブル内にいくつでも入れる事ができるんでしたね。
このように、tbodyを分けて、背景色を変えたりできます。

サンプルのHTMLはこちら。ハイライト部分が、先ほどのサンプルからの変更点です。
一旦 <tbody>を終わらせて（44行目）新たに <tbody class="areaC"> と、クラス名を付けた <tbody>を始めています。

<table class="sample1">
<thead>
  <tr>
    <th>エリア</th>
    <th>店舗名</th>
    <th>来店総数</th>
    <th>新規来店</th>
    <th>リピート</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th rowspan="3">A</th>
    <td>渋谷店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
  <tr>
    <td>神宮前店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
  <tr>
    <td>青山店</td>
    <td>200</td>
    <td>120</td>
    <td>80</td>
  </tr>
  <tr>
    <th rowspan="2">B</th>
    <td>三軒茶屋店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
  <tr>
    <td>二子玉川店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
</tbody>
<tbody class="areaC">
  <tr>
    <th rowspan="3">C</th>
    <td>銀座店</td>
    <td>200</td>
    <td>120</td>
    <td>80</td>
  </tr>
  <tr>
    <td>日本橋店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
  <tr>
    <td>京橋店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <th colspan="2">合計</th>
    <td>1150</td>
    <td>780</td>
    <td>370</td>
  </tr>
</tfoot>
</table>

CSSは、その新しい <tbody class="areaC">の背景色を追加しています。

table.sample1 tbody.areaC {
	background: #ffe9da;
	}

次回予告

横にグループ化できるなら、縦もできるんだろうか？…できます！
次回は、テーブルの縦列をグループ化する方法です。

縦方向にグループ化するには <colgroup>要素を使います。
その <colgroup> の中をさらに縦に分ける時は <col>要素を使います。

関連記事

• [17-4] ナビゲーションのセクションを表す nav要素
• [17-3] セクショニング要素と見出し要素のルール
• [17-2] セクショニングの article要素、aside要素、section要素
• [17-1] HTML5 の新要素でページ全体を組もう
• （ちょっとメモ）テーブルをレスポンシブ対応させるCSS
• [16-7] テーブルセルで使う scope属性と headers属性について
• [16-6] table縦列グループ化（ colgroup, col ）
• [16-5] table横列グループ化（thead, tbody, tfoot）
• [16-4] tableのセルの枠線を非表示にしよう（empty-cellsプロパティ）
• [16-3] table のセルを連結しよう（colspan属性・rowspan属性）
• [16-2] table にタイトルをつけよう（ caption要素 ）
• [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
• [15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）
• [15-6] リストでナビゲーション（ li 要素を display で横に並べる）
• [15-5] リストでナビゲーション（ li 要素を float で横に並べる）

Tweet

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