<thead></thead> <tfoot></tfoot> <tbody></tbody>
| ブラウザ |
|
|---|---|
| 分類 | --- |
| 要素 |
thead要素、tfoot要素、tbody要素は、表の行（横列）をグループ化する要素です。
これらの要素を使用することで、表の内容をヘッダ部分、フッタ部分、本体部分としてグループ化することができます。
<thead> ～ </thead>
<tfoot> ～ </tfoot>
<tbody> ～ </tbody>
- thead要素
<thead>～</thead> 要素の内容を、表のヘッダ部分としてグループ化します。この要素は、表内に1つだけ配置することができます。
- tfoot要素
<tfoot>～</tfoot> 要素の内容を、表のフッタ部分としてグループ化します。この要素は、表内に1つだけ配置することができます。
- tbody要素
<tbody>～</tbody> 要素の内容を、表の本体部分としてグループ化します。この要素は、表内に必要な数だけ配置することができます。
グループ化の指定を行うと、グループ単位で属性やスタイルシートが設定できるようになります。また、一部のブラウザでは、ヘッダとフッタを固定させて本体部分をスクロールできるようになります。
記述する順序
thead、tfoot、tbodyの各要素は、table要素内に以下の順序で配置します。
<table>
<thead>
<tr>
<th>ヘッダ部分</th>
</tr>
</thead>
<tfoot>
<tr>
<td>フッタ部分</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>本体部分</td>
</tr>
</tbody>
</table>
上記のように、記述の順序としてはtbody要素を最後に配置することになります。しかし、これらの要素に対応しているブラウザでは、ヘッダ部分 → 本体部分 → フッタ部分の順序で表示されます。
caption要素を使用している場合
caption要素を使用している場合は、caption要素の後にthead要素を配置します。
<table>
<caption>表のタイトル</caption>
<thead>
<tr>
<th>ヘッダ部分</th>
</tr>
</thead>
...
colgroup要素、またはcol要素を使用している場合
colgroup要素（col要素）を使用している場合は、colgroup要素（col要素）の後にthead要素を配置します。
<table>
<caption>表のタイトル</caption>
<colgroup></colgroup>
<thead>
<tr>
<th>ヘッダ部分</th>
</tr>
</thead>
...
<table>
<caption>表のタイトル</caption>
<col align="center">
<thead>
<tr>
<th>ヘッダ部分</th>
</tr>
</thead>
...
tbody要素に関して
HTML 4.01では、table要素内にtbody要素を配置することが必須とされています。
<table>
<tbody>
<tr>
<td>表の内容</td>
</tr>
</tbody>
</table>
しかし、表内にthead要素とtfoot要素が存在しない場合で、かつtbody要素が1つの場合には、tbody要素の開始タグと終了タグの記述を省略することができます。
- タグの記述を省略した場合でも、tbody要素そのものは存在することになります。例えば次の場合では、tbody要素が1つ配置されているとみなされます。
<table>
<tr>
<td>表の内容</td>
</tr>
</table>
グループ単位の属性指定
以下の属性を使用すると、セル内の文字の位置をグループ単位で指定することができます。
<thead align="left" valign="top"> ～ </thead>
<tfoot align="center" valign="middle"> ～ </tfoot>
<tbody align="right" valign="bottom"> ～ </tbody>
align="" は水平方向、valign="" は垂直方向の指定を行います。
| 属性 | 値 | 説明 |
|---|---|---|
align="" |
left |
左寄せで表示 （td要素の初期値） |
center |
中央揃えで表示 （th要素の初期値） | |
right |
右寄せで表示 | |
justify |
両端揃えで表示 | |
valign="" |
top |
上揃えで表示 |
middle |
中央揃えで表示 （初期値） | |
bottom |
下揃えで表示 | |
baseline |
1行目をベースラインで揃える |
指定内容に関する詳細は、セル内の文字の位置を指定するをご覧ください。
使用例
<table border="3">
<thead>
<tr>
<th>品目</th>
<th>販売数</th>
<th>売上高</th>
</tr>
</thead>
<tfoot>
<tr>
<th>合計</th>
<td>115</td>
<td>1,150,000円</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>東京事業所</th>
<th></th>
<th></th>
</tr>
<tr>
<td>商品A</td>
<td>30</td>
<td>300,000円</td>
</tr>
<tr>
<td>商品B</td>
<td>25</td>
<td>250,000円</td>
</tr>
</tbody>
<tbody>
<tr>
<th>大阪事業所</th>
<th></th>
<th></th>
</tr>
<tr>
<td>商品A</td>
<td>28</td>
<td>280,000円</td>
</tr>
<tr>
<td>商品B</td>
<td>32</td>
<td>320,000円</td>
</tr>
</tbody>
</table>
- 表示例
-
品目 販売数 売上高 合計 115 1,150,000円 東京事業所 商品A 30 300,000円 商品B 25 250,000円 大阪事業所 商品A 28 280,000円 商品B 32 320,000円
▼CSSコード
table, th, td {
border: 1px #808080 solid;
}
th, td {
padding: 5px 10px;
}
thead {
background-color: #e3f0fb;
}
tfoot {
background-color: #e0e0e0;
}
tbody {
height: 140px; /* 本体部分の高さを指定 */
overflow: auto; /* はみ出した部分をスクロールで表示 */
background-color: #ffffff;
}
tbody tr {
height: auto; /* IE用 */
}
▼HTMLコード
<table border="3">
<thead>
<tr>
<th>品目</th>
<th>販売数</th>
<th>売上高</th>
</tr>
</thead>
<tfoot>
<tr>
<th>合計</th>
<td>200</td>
<td>2,000,000円</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>商品A</td>
<td>30</td>
<td>300,000円</td>
</tr>
<tr>
<td>商品B</td>
<td>25</td>
<td>250,000円</td>
</tr>
<tr>
<td>商品C</td>
<td>28</td>
<td>280,000円</td>
</tr>
<tr>
<td>商品D</td>
<td>32</td>
<td>320,000円</td>
</tr>
<tr>
<td>商品E</td>
<td>28</td>
<td>280,000円</td>
</tr>
<tr>
<td>商品F</td>
<td>30</td>
<td>300,000円</td>
</tr>
<tr>
<td>商品G</td>
<td>27</td>
<td>270,000円</td>
</tr>
</tbody>
</table>
- 表示例
-
▼スクリーンショット
- tbody要素に height と overflow プロパティを設定すると、Firefoxではスクロールバーが表示されます。（IEではこの指定に対応していません）
▼実際の表示
品目 販売数 売上高 合計 200 2,000,000円 商品A 30 300,000円 商品B 25 250,000円 商品C 28 280,000円 商品D 32 320,000円 商品E 28 280,000円 商品F 30 300,000円 商品G 27 270,000円