備忘録的プログラミングリファレンス

thead, tbody, tfoot タグエレメント

 thead, tbody, tfoot タグエレメントは、table のヘッダー、データ部分、フッターを明確に分けることができる HTML タグエレメントです。

 thead は表のヘッダー部分、tbody はデータ部分, tfoot はフッター部分を表します。

thead, tbody, tfoot タグエレメント
<table>
	<thead>
		<tr><th>項目名</th><th>概要</th></tr>
	</thead>
	<tbody>
		<tr><td>example</td><td>例えばを意味</td></tr>
		<tr><td>本題</td><td>本題の説明は必要</td></tr>
		<tr><td>その他</td><td>他のはなし</td></tr>
	</tbody>
	<tfoot>
		<tr><th colspan="2">この一覧は例です</th></tr>
	</tfoot>
</table>
表示例
項目名概要
example例えばを意味
本題本題の説明は必要
その他他のはなし
この一覧は例です

 thead, tbody, tfoot タグエレメントを使用することで、1つの表を複数のカテゴリーに分けることもできます。

<thead> エレメント

 <thead> エレメントは、<table> のヘッダ行を明確に定義する HTML タグエレメントです。

属性

グローバル属性を持ちます。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。


<tbody> エレメント

 <tbody> エレメントは、<table> のデータ部分を示す HTML タグエレメントです。<table> に <thead> や <tfoot> を定義したら必要になります。

属性

グローバル属性を持ちます。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。


<tfoot> エレメント

 <tfoot> エレメントは、<table> のフッター行を明確にする HTML タグエレメントです。

属性

グローバル属性を持ちます。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。


Example 複数のカテゴリに分ける

 thead, tbody, tfoot タグエレメントは表のヘッダー、データ部分、フッターを明確に分けることができます。

 thead, tbody, tfoot タグエレメントによって、1つの表を複数のカテゴリーに分けることもできます。
 例えば以下のように地方によって分けるために、thead, tbody, tfoot タグを使用しています。

複数のカテゴリに分ける
<table>
	<thead>
		<tr><th>都道府県名</th><th>県庁所在地</th></tr>
	</thead>
	<thead>
		<tr><th colspan="2">関東地方</th></tr>
	</thead>
	<tbody>
		<tr><td>茨城県</td><td>水戸市</td></tr>
		<tr><td>栃木県</td><td>宇都宮市</td></tr>
		<tr><td>群馬県</td><td>前橋市</td></tr>
		<tr><td>埼玉県</td><td>さいたま市</td></tr>
		<tr><td>千葉県</td><td>千葉市</td></tr>
		<tr><td>東京都</td><td>新宿区</td></tr>
		<tr><td>神奈川県</td><td>横浜市</td></tr>
	</tbody>
	<thead>
		<tr><th colspan="2">東海地方</th></tr>
	</thead>
	<tbody>
		<tr><td>愛知県</td><td>名古屋市</td></tr>
		<tr><td>岐阜県</td><td>岐阜市</td></tr>
		<tr><td>三重県</td><td>津市</td></tr>
		<tr><td>静岡県</td><td>静岡市</td></tr>
	</tbody>
	<tfoot>
		<tr><th colspan="2">この一覧は例です</th></tr>
	</tfoot>
</table>
表示例
都道府県名県庁所在地
関東地方
茨城県水戸市
栃木県宇都宮市
群馬県前橋市
埼玉県さいたま市
千葉県千葉市
東京都新宿区
神奈川県横浜市
東海地方
愛知県名古屋市
岐阜県岐阜市
三重県津市
静岡県静岡市
この一覧は例です

JavaScript

 <thead>,<tbody>,<tfoot> エレメントの定義については HTMLTableSectionElement を参照してください。