tbodyタグ -table内でデータの本体部分をグループ化する｜HTML辞典

<tbody>タグとは？

<tbody> タグは、HTML の <table>（表）内でデータの本体部分（ボディ）をグループ化するためのタグです。
<thead>（ヘッダー）や <tfoot>（フッター）と組み合わせて、表の構造を明確にする際に使用されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<tbody> は 開始タグ（<tbody>）と閉じタグ（</tbody>）の両方が必要 です。

基本的な記述方法

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
        <tr>
            <td>バナナ</td>
            <td>150円</td>
        </tr>
    </tbody>
</table>

✅ データ部分（商品と価格）が <tbody> 内にグループ化されています。

使用できる主な属性

<tbody> タグには特別な属性はありません。

CSSを使ったデザイン変更

<tbody> を使うと、データ部分の スタイルを統一して適用 できます。

tbody {
    background-color: #fff;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

✅ 表のデータ部分の偶数行に背景色を適用し、視認性を向上させています。

適切な使用例

✅ <thead>, <tbody>, <tfoot> を使って表の構造を整理する

<table>
    <thead>
        <tr>
            <th>商品</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>みかん</td>
            <td>200円</td>
        </tr>
        <tr>
            <td>ぶどう</td>
            <td>300円</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>500円</td>
        </tr>
    </tfoot>
</table>

✅ 表のデータ部分を <tbody> にまとめることで、コードの可読性が向上しています。

適切でない使用例（誤った使い方）

❌ <tbody> を <table> の外に記述する

<!-- NG: <table> の外に <tbody> を記述 -->
<tbody>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
</tbody>
<table>
    <tr>
        <td>バナナ</td>
    </tr>
</table>

✅ 正しい書き方（<table> 内に記述）

<table>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
    </tbody>
</table>

❌ <tbody> なしで <tr> を記述する

<!-- NG: <tbody> を省略 -->
<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
</table>

✅ 正しい書き方（データ部分を <tbody> にグループ化）

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>りんご</td>
            <td>100円</td>
        </tr>
    </tbody>
</table>

<tbody>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<tbody>	データ部分をグループ化	<tr> を含む	メインのデータ行
<thead>	ヘッダーをグループ化	<tr> を含む	表の見出し行
<tfoot>	フッターをグループ化	<tr> を含む	合計や備考などの行
<th>	見出しセルを作成する	デフォルトで太字＋中央寄せ	列名やカテゴリー名
<tr>	行を作成する	<th> や <td> を内包	表の行

使用上の注意点

✅ <tbody> は <table> の中に配置する

• <table> の外では無効になるため、必ず表の中で使用する。

✅ <tr> で行を定義し、適切にセルを配置する

• データ部分を整理するため、<tbody> 内に <tr> を入れる。

✅ <thead>, <tfoot> と組み合わせて使用すると、可読性とアクセシビリティが向上する

• 検索エンジンが構造を理解しやすくなり、SEO にも有利。

関連タグ

• <table> – 表を作成
• <caption> – 表のタイトルを指定
• <tr> – 行を作成
• <th> – 見出しセルを作成
• <td> – データセルを作成
• <thead> – ヘッダー部分をグループ化
• <tfoot> – フッター部分をグループ化

まとめ

<tbody> タグは、HTML の 表のデータ部分をグループ化するためのタグ です。
適切に使用することで、データの可読性が向上し、アクセシビリティや SEO にも貢献します。