[16-5] table横列グループ化(thead, tbody, tfoot)

最終更新日:2022年09月08日  (初回投稿日:2011年06月30日)

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

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

この3つを使うことで、
・テーブルの構造が明確になるので、コーディング時に編集しやすい。
・テーブルの構造が明確になるので、アクセシビリティ的により良くなる。

ので、簡単なテーブルでは 省略可能ですが、使うほうが正当な書き方なようです。

<tbody>に関しては、タグを省略してもブラウザ側で認知して、<table>要素の開始タグと終了タグの間に自動生成します。たとえば、このようにテーブルを書いても、↓

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

ブラウザは、実際のレンダリングではこのように <tbody> を追加します。↓

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

WHATWGの仕様書では「tbodyのタグの省略」について下記のように記載されています。

「tbody 要素内の最初の要素が tr 要素であり、要素の直前に終了タグが省略された tbody、thead、tfoot 要素がない場合、tbody 要素の開始タグを省略できます。 (要素が空の場合は省略できません)」(注:このあと終了タグの省略についても記載あり)
原文:A tbody element's start tag can be omitted if the first thing inside the tbody element is a tr element, and if the element is not immediately preceded by a tbody, thead, or tfoot element whose end tag has been omitted. (It can't be omitted if the element is empty.)

というわけでブラウザは「書いていない」→「タグを省略しただけ」という解釈のようです。

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

エリア 店舗名 来店総数 新規来店 リピート
A 渋谷店 100 80 20
神宮前店 150 100 50
青山店 200 120 80
B 三軒茶屋店 100 80 20
二子玉川店 150 100 50
合計 700 480 220
使用する要素 <thead> 〜 </thead>
<tbody> 〜 </tbody>
<tfoot> 〜 </tfoot>

<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を分けて、背景色を変えたりできます。

エリア 店舗名 来店総数 新規来店 リピート
A 渋谷店 100 80 20
神宮前店 150 100 50
青山店 200 120 80
B 三軒茶屋店 100 80 20
二子玉川店 150 100 50
C 銀座店 200 120 80
日本橋店 100 80 20
京橋店 150 100 50
合計 1150 780 370

サンプルの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>要素を使います。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

No title

 はじめまして、10数年ぶりにHTMLを再開してみようとコチラへ来てみました。
順に勉強させてもらっています。
<th rowspan="3">A</td>
どうしても↑ここで1日止まってしまっています。
<th rowspan="3">A</td>で違うタグで閉じることが、現在では可能なのでしょうか。他も検索してみましたが分かりません。
ソースを書き換えてみても表示は変わりないので、短縮し略すことが可能なのでしょうか?
現在、MACでグーグルクロームとSafariで確認しています。
出来ましたら答えを宜しくお願いいたします。

Re: No title

いや〜〜福ださ〜〜ん! ごめんなさ〜い!
それタイプミスです。</th>で閉じるんです。申し訳ないです。
(しかもこんなに返信が遅くて、ご覧になるでしょうか...)

今、サンプルと記事を急ぎ修正しました。
まだ何か不審な点があるかもしれません...。
ほかにも何か気がつかれましたら教えてください。
すみません。ご迷惑をおかけいたしました。


いつもサンプルを先に作り、サンプルのソースを記事本文にコピペして書いています。
ということは、サンプルも記述ミスだったのですが、ちゃんとテーブルが表示されていました。
それは、<th>の終了タグが省略可能だから。それでエラーにならなかったんですね。
HTML5の省略可能なタグについてはこちら↓
http://honttoni.blog74.fc2.com/blog-entry-170.html

サンプルページを作るとき、前回サンプルのテーブルソースをコピペして、
<td>〜</td>の最初だけ<th>に直して、終了タグは直し忘れて</td>になっていたようです。
そのまま記事本文にコピペして持ってきたのであの状態に。
今後このようなミスの無いように気をつけます。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2023/03 | 04
- - - 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
Profile

yuki★hata

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

メールフォームはこちら

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