HTMLタグ/テーブルタグ/行をグループ化する

<thead></thead> <tfoot></tfoot> <tbody></tbody>

ブラウザ
要素: thead要素; tfoot要素; 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>

表示例

▼スクリーンショット

［Firefox2とIE7の表示例］

※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円

サイト内検索

テーブルタグ

行をグループ化する