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

tableの横列(tr要素)をグループ化できる<thead><tbody><tfoot>の3つの要素があります。
「ヘッダ部分」「本体部分」「フッタ部分」にわけてまとめるので、CSSの指定がしやすくなります。

サンプルでは、<thead><tbody><tfoot>でグループ化して、下のように色分けしてみました。


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

使用する要素 <thead> 〜 </thead>
<tbody> 〜 </tbody>
<tfoot> 〜 </tfoot>

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

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

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

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

まずはサンプルのように<thead><tbody><tfoot>に分けて、背景色を指定してみましょう。

<thead><tbody><tfoot>いずれも、<tr>〜</tr>を囲むように使います。
サンプルのHTMLを見てみましょう。

<table class="sample1">
<caption>来店者数</caption>
<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>。<tr>要素を囲んでいるのがわかりますよね。
<caption>〜</caption> よりも後に入れます。
(<caption>は必ず<table>タグの直後に入れます。)

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

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

<tbody>は1つのtableの中に複数入れられます。
中に<tr>要素はいくつでも入れられます。

<tfoot>は1つのtableの中に1つしか入れられません。
中に<tr>要素はいくつでも入れられます。
それと<tfoot>は<tbody>よりも前に置く事が出来ます。(プレビューはちゃんと一番下に表示。)
<tbody>がやたら長いとき、先にフッタを読み込ませることができるんです。(ただし、未対応の古いブラウザだと、そのまま<tfoot>が<tbody>より先に表示されるので要注意です。)

CSSで色分けしてみよう

このようにグループ分けするのは、<table>の構造をわかりやすくするため。 そしてCSSの指定もしやすくなります。
ということで、CSSで背景色などを指定してみましょう。

サンプルのCSSを見てみましょう。(関係ない部分は省略しています)

table.sample2 thead tr {
	background: #C7EBC9;
}
table.sample2 tfoot tr {
	background: #86BD7E;
	color:#FFF;
}
table.sample2 tbody tr {
	background: #FFC;
}

こんなかんじで、それぞれ(thead, tfoot, tbody)の <tr>要素に、CSSを指定してます。
サンプルでは、thead trに淡いグリーン、tfoot trに濃いグリーン(文字は白)を、
tbody trには黄色の背景色を指定しています。

tbodyは複数でもOK!(thead, tfootは1つのtableに1つずつ)

<tbody>要素は1つの<table>内にいくつでも入れる事が出来ます。
表の本体部分を、何個にもグループ分け出来るってことです。

このように、tbodyを分けて、背景色を変えたりできますよ。

まずは、サンプルのCSSを見てみましょう。

table.sample2 thead tr {
	background: #C7EBC9;
}
table.sample2 tfoot tr {
	background: #86BD7E;
	color:#FFF;
}
table.sample2 tbody tr {
	background: #FFC;
}
table.sample2 tbody.pink tr {
	background: #FFE9DA;
}

先ほどのCSSに、最後の3行(11、12、13行目)を加えました。
<tbody>は背景色を黄色(#FFC)にしてますが、クラス名「pink」のtbodyを作って、背景色をピンク(#FFE9DA)に指定しています。

で、HTMLで、<tbody>によるグループを追加して、このクラス名「pink」を指定してやればいいんです。

<table class="sample2">
<caption>来店者数</caption>
<thead>
<!--省略-->
</thead>
<tfoot>
<!--省略-->
</tfoot>
<tbody>
<!--省略-->
</tbody>
<tbody class="pink">
<!--省略-->
</tbody>
</table>

この↑ように、2番目の<tbody>にクラス名「pink」を指定しています(class="pink")。
これでこの<tbody>の背景色が変わります。
(HTML & CSS ソースの全体は、今日のサンプルを見てください。)

次回予告

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

縦方向にグループ化する要素は <colgroup>を使います。
その<colgroup>の中をさらに縦に分ける時は<col> という要素を使います。
今回のようにCSSを指定するのに便利です。

どちらかと言えば、縦のグループ化はCSSのためだけっぽいかな。
今日の横のグループ化は、<table>内の構造もわかりやすくしてますけどね。
ただ、表の中を縦にグループ化できると、CSSで色やフォントを指定するときにとっても便利です。

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

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

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

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

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、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
04 | 2017/05 | 06
- 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.