HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<tbody>
テーブル本体（Table Body）要素。HTMLテーブルの主要なデータ行グループを定義します。
info
概要
<tbody> 要素は、HTMLの <table> 要素内で、テーブルの本体（データ行）を構成する行（<tr>）のグループ化に使用されます。
この要素を使用することで、テーブルのヘッダー (<thead>) やフッター (<tfoot>) とは独立した、主要なデータを視覚的・構造的に区別することができます。
<table> の直下で <tr> が使用された場合、ブラウザは暗黙的に <tbody> を補完することがあります。
play_circle
デモ (静的表示)
HTML (Source)
<table style="width:100%; border: 1px solid #ccc; border-collapse: collapse;">
<thead>
<tr><th>項目</th><th>値</th></tr>
</thead>
<tbody> <!-- テーブル本体 -->
<tr>
<td>製品名</td><td>A-100</td>
</tr>
<tr>
<td>価格</td><td>¥5,000</td>
</tr>
</tbody>
</table>
Preview (Result)
| 項目 | 値 |
|---|---|
| 製品名 | A-100 |
| 価格 | ¥5,000 |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| なし | <tbody> 要素固有の属性はありません。グローバル属性（id, class, style, data-*など）のみが使用可能です。 |
code
実用例
1. <thead> と <tfoot> を伴う基本的な構造
<table>
<caption>四半期売上サマリー</caption>
<thead>
<tr>...</tr>
</thead>
<tbody> <!-- 本体データ -->
<tr>...</tr>
<tr>...</tr>
</tbody>
<tfoot>
<tr>...</tr>
</tfoot>
</table>
2. 複数の <tbody> を使用したグループ化
<table>
<thead>
<tr><th>支店</th><th>売上</th></tr>
</thead>
<tbody class="region-tokyo"> <!-- 東京地域のデータ -->
<tr><td>渋谷</td><td>1200</td></tr>
<tr><td>新宿</td><td>1500</td></tr>
</tbody>
<tbody class="region-osaka"> <!-- 大阪地域のデータ -->
<tr><td>梅田</td><td>800</td></tr>
</tbody>
</table>
lightbulb
知っておくべき重要事項
structure
<thead>, <tfoot> との関係
<tbody>、<thead>、<tfoot> は、テーブルの構造を明確にするために使用されます。この構造は、ブラウザが**テーブルヘッダーを印刷時に各ページに繰り返し表示**したり、JavaScriptでデータをソート・操作する際に役立ちます。
accessibility_new
アクセシビリティ
<tbody> はテーブルのデータ部分を明確に区切るため、スクリーンリーダーなどの支援技術に対してテーブルの構造をより正確に伝えます。常に <tr> を <tbody> の中に配置することが、アクセシビリティの向上に繋がります。