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

最終更新日:2017年10月31日  (初回投稿日:2011年06月30日)

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

<thead> は「table head」の略。「ヘッダ部分」です。
<tbody> は「table body」の略。「本体部分」です。
<tfoot> は「table foot」の略。「フッタ部分」です。
このように 3ブロックに分けられるので、CSSの指定がしやすくなります。

下のサンプルは、ブロック分けをした部分に 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>

2017年10月、サンプルは本文内に記載し、それに伴い本文も書き直しました。

<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> よりも前に置く事が出来ます。プレビューはちゃんと一番下に表示されます。

<tbody>がやたら長いとき、先にフッタを読み込ませることができるんです。
ただし、未対応の古いブラウザだと、そのまま <tfoot> が <tbody>より先に表示されるので要注意です。

CSSで色分けしてみよう

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

サンプルのCSSを見てみましょう。それぞれの <tr>要素に背景色などを指定してます。
(関係ない部分は省略しています)

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

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

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

エリア 店舗名 来店総数 新規来店 リピート
合計 1150 780 370
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

サンプルのHTMLはこちら。ハイライト部分が、先ほどのサンプルからの変更点です。
ちょっと長いけど、HTMLを全文記載します。

<table class="sample2">
<thead>
  <tr>
    <th>エリア</th>
    <th>店舗名</th>
    <th>来店総数</th>
    <th>新規来店</th>
    <th>リピート</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <th colspan="2">合計</th>
    <td>1150</td>
    <td>780</td>
    <td>370</td>
  </tr>
</tfoot>
<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>
</table>

先ほどのサンプルの <tbody>を、52行目で一度終わらせて、
新たに <tbody class="areaC"> と、クラス名を付けた <tbody>を始めています。

CSSは、その新しい <tbody>の背景色を追加するだけ。

table.sample2 tbody.areaC tr {
	background: #ffe9da;
	}

ちなみにこのサンプルでは、<tfoot>を上のほうに持ってきています。(HTMLソースの 11〜18行目)
HTML5 に対応しているブラウザなら、<tfoot> はテーブルのフッター部分に表示されているはずですが、いかがでしょうか。

次回予告

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

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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
10 | 2017/11 | 12
- - - 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 - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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