<thead>〜</thead>‥‥‥表のヘッダ部分のグループ化
<tbody>〜</tbody>‥‥‥表の本体(データ)部分のグループ化
<tfoot>〜</tfoot>‥‥‥表のフッタ部分のグループ化
| 要素名 | 属性名 | 説明 | 非推奨 | 必須属性 |
|---|---|---|---|---|
| thead tbody tfoot | 表ヘッダ 表本体 表フッタ | |||
| align | グループ化したセル内の行揃え | |||
| valign | 縦方向の位置揃え | |||
| char | char属性で指定された文字の位置を揃える | |||
| chroff | align属性が「char」時のセルの端からchar属性文字の距離の指定。「ピクセル数」または「%」で指定 | |||
| class | クラス名 | |||
| id | ＩＤ名 | |||
| title | 補足情報 | |||
| style | スタイルシート | |||
| lang | 言語コード | |||
| dir | 文字表記の方向 |
表(table)はその機能によりヘッダ部分、ボディ部分、フッタ部分の三つに分ける事が出来ます。thead要素は、「table head」の略で、表のヘッダ部分の一行を定義（グループ化）するのに使います。すなわち<thead>〜</thead>で定義すると囲まれた部分が
表のヘッダ部分であるとプラウザが認識する訳です。thead要素は一つのテーブル内に一つしか配置できません。又、tr要素を1つ以上内包する必要があります。tbody要素は、「table body」の略で、表の本体部分を定義(グループ化)します。<tbody>〜</tbody>で囲まれた部分が表のボディ部分と プラウザが認識するわけです。
tbody要素は一つのテーブル要素に複数配置する事が出来ます。又、tr要素を1つ以上内包する必要があります。
tfoot要素は、「table foot」の略で、表のフッタ部分を定義(グループ化)する際に使います。<tfoot>〜</tfoot>で囲まれた部分が表のフッタ部分と定義します。 tfoot要素は一つのテーブル内に一つしか配置できません。又、tr要素を1つ以上内包する必要があります。
このように定義しておくと、ヘッダ部分、ボディ部分、フッタ部分に対してスタイルシートや属性をまとめて適用できるようになります。 又、ヘッダとフッタを固定した状態で、ボディ部分をスクロールさせる事や、複数ページに渡る表を印刷する場合に各ページにヘッダとフッタを 印刷させる事も可能になります。
これらの要素は、必ずthead要素、tfoot要素、tbody要素の順に記述する必要が有ります。
Sample
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>表のヘッダ、ボディ、フッタ部分を定義する。</title>
<style type="text/css">
<!--
body{font-size:1.5em}
table{border:1px solid black;border-collapse:collapse;}
td{text-align:right;border:1px solid black;}
th{text-align:center;border:1px solid black;}
thead,tfoot th{color:white;background-color:green;}
tbody{color:black;background-color:#D3D3D3;}
-->
</style>
</head>
<body>
<table>
<thead>
<tr><th>売り上げ</th><th>新宿店</th><th>横浜店</th><th>川崎店</th></tr>
</thead>
<tfoot>
<tr><th>合計</th><th>13,000</th><th>14,000</th><th>12,000</th>
</tr>
</tfoot>
<tbody>
<tr><td>1月</td><td>2,500</td><td>3,000</td><td>2,000</td></tr>
<tr><td>2月</td><td>3,000</td><td>3,000</td><td>2,500</td></tr>
<tr><td>3月</td><td>2,000</td><td>2,000</td><td>2,500</td></tr>
<tr><td>4月</td><td>2,500</td><td>2,500</td><td>3,000</td></tr>
<tr><td>5月</td><td>3,000</td><td>3,500</td><td>2,000</td></tr>
</tbody>
</table>
</body>
</html>
<html lang="ja">
<head>
<base href="http://www.abcd.com/efg/index.html">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="制作者名">
<meta name="description" content="内容の紹介">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,・・・">
<link rel="start" href="start.html">
<link rel="index" href="index.html">
<title>表のヘッダ、ボディ、フッタ部分を定義する。</title>
<style type="text/css">
<!--
body{font-size:1.5em}
table{border:1px solid black;border-collapse:collapse;}
td{text-align:right;border:1px solid black;}
th{text-align:center;border:1px solid black;}
thead,tfoot th{color:white;background-color:green;}
tbody{color:black;background-color:#D3D3D3;}
-->
</style>
</head>
<body>
<table>
<thead>
<tr><th>売り上げ</th><th>新宿店</th><th>横浜店</th><th>川崎店</th></tr>
</thead>
<tfoot>
<tr><th>合計</th><th>13,000</th><th>14,000</th><th>12,000</th>
</tr>
</tfoot>
<tbody>
<tr><td>1月</td><td>2,500</td><td>3,000</td><td>2,000</td></tr>
<tr><td>2月</td><td>3,000</td><td>3,000</td><td>2,500</td></tr>
<tr><td>3月</td><td>2,000</td><td>2,000</td><td>2,500</td></tr>
<tr><td>4月</td><td>2,500</td><td>2,500</td><td>3,000</td></tr>
<tr><td>5月</td><td>3,000</td><td>3,500</td><td>2,000</td></tr>
</tbody>
</table>
</body>
</html>
Internet Explorer8での表示例
