tbody要素

tbody要素は、表（テーブル）のボディ（本体）部分であることを示す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト table要素の子要素にtr要素が１つもない場合、table要素の子要素として使用できる。
ただし、caption要素、colgroup要素、thead要素より後ろに配置しなければならない。
コンテンツ・モデル ０個以上のtr要素、template要素、script要素を内包できる。
属性 グローバル属性。
ブラウザ対応

構文

<tbody></tbody>

要点

  • tbody要素は、表（テーブル）のボディ（本体）部分であることを示す要素である。
  • ヘッダーであることを示すthead要素や、フッターであることを示すtfoot要素と共に使うことが多い。
  • １つの表に複数のtbody要素を配置することもできる。

サンプルコード

<table>
	<thead>
		<tr>
			<td>ヘッダーのセル</td>
			<td>ヘッダーのセル</td>
			<td>ヘッダーのセル</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
		</tr>
	</tfoot>
</table>

サンプル

HTMLソースコード

<table border="1">
	<thead style="background-color: lime">
		<tr>
			<th>ヘッダーのセル</th>
			<th>ヘッダーのセル</th>
			<th>ヘッダーのセル</th>
		</tr>
	</thead>
	<tbody style="background-color: aqua">
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tbody style="background-color: silver">
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
		<tr>
			<td>データセル</td>
			<td>データセル</td>
			<td>データセル</td>
		</tr>
	</tbody>
	<tfoot style="background-color: yellow">
		<tr>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
			<td>フッターのセル</td>
		</tr>
	</tfoot>
</table>

実際の表示

ヘッダーのセル ヘッダーのセル ヘッダーのセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
フッターのセル フッターのセル フッターのセル