HTML

The tbody element is used to group data within an HTML table.

tbody 要素

　tbody要素は、HTMLのテーブルを構造化するために使用される要素の一つです。テーブルは表形式のデータを表示するのに適しており、tbody要素はテーブル内の本体部分を表します。tbody要素は通常、テーブルの中で thead要素と tfoot要素の間に配置されます。

　tbody要素の主な目的は、テーブルの内容をグループ化し、スタイリングやスクリプトの適用のためにセレクタとして使用されることです。テーブル内の各行は、tbody要素内に tr要素で定義されます。

　以下に、tbody要素の使い方と具体的なサンプルコードを示します。

<table>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data 1-1</td>
			<td>Data 1-2</td>
		</tr>
		<tr>
			<td>Data 2-1</td>
			<td>Data 2-2</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Footer 1</td>
			<td>Footer 2</td>
		</tr>
	</tfoot>
</table>

　上記のコードでは、テーブル要素を定義し、その中に thead、tbody、tfootの各要素を配置しています。thead要素内には表のヘッダ行があります。tbody要素内には表の本体部分であるデータ行があります。tfoot要素内には表のフッタ行があります。

　tbody要素を使用することで、CSSや JavaScriptでテーブル内の特定の部分を対象にできます。また、テーブルが大量のデータを含む場合でも、tbody要素を使用してデータのセクションを分割することで、読みやすさやパフォーマンスの向上が期待できます。

tbody要素の概要

カテゴリー

なし

コンテンツ･モデル

0個以上の tr要素

利用可能な場所

table要素の子として。ただし、caption要素、colgroup要素、thead要素の後ろでなければいけません。また、この要素を使う場合、tr要素を table要素の直下に入れてはいけません。

開始タグ

tbody要素の中の最初が tr要素で、終了タグが省略された tbody要素、thead要素、tfoot要素が直前に来なければ、省略することが可能です。

終了タグ

該当の tbody要素の直後に tbody要素または tfoot要素が来る場合、または、該当の tbody要素が親要素の中で最後の要素となる場合に省略することが可能です。

要素固有の属性

なし

標準的なスタイル

tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
}