theadタグ -table内でヘッダー部分をグループ化する｜HTML辞典

<thead>タグとは？

<thead> タグは、HTML の <table>（表）内でヘッダー部分をグループ化するためのタグです。
主に <th>（見出しセル）と組み合わせて、表のタイトル行を明確にするために使用されます。

基本情報

コンテンツモデル

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

閉じタグの有無

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

基本的な記述方法

<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>

この記述により、表の見出し行が <thead> にグループ化されます。

使用できる主な属性

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

CSSを使ったデザイン変更

<thead> を使うと、見出し部分に 一括でスタイルを適用 できます。

thead {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}

適切な使用例

✅ 表のヘッダー部分を明確にする

<table>
    <thead>
        <tr>
            <th>商品</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>みかん</td>
            <td>200円</td>
        </tr>
    </tbody>
</table>

✅ <tfoot>（フッター）と組み合わせる

<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>
    <tfoot>
        <tr>
            <td>合計</td>
            <td>250円</td>
        </tr>
    </tfoot>
</table>

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

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

<!-- NG: <table> の外に <thead> を記述 -->
<thead>
    <tr>
        <th>商品名</th>
    </tr>
</thead>
<table>
    <tr>
        <td>りんご</td>
    </tr>
</table>

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

<table>
    <thead>
        <tr>
            <th>商品名</th>
        </tr>
    </thead>
</table>

❌ <thead> を <tr> なしで直接記述する

<!-- NG: <tr> を省略 -->
<table>
    <thead>
        <th>商品名</th>
        <th>価格</th>
    </thead>
</table>

✅ 正しい書き方（<tr> で行を定義）

<table>
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
</table>

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

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

使用上の注意点

✅ <thead> は <table> の最初に配置する

• 表の構造を明確にするため、常に <tbody> より上に記述する。

✅ <tr> で行を定義する

• <thead> の中に直接 <th> や <td> を書かない。

✅ <tfoot> と組み合わせると、見出しとフッターが統一される

• 大きなデータテーブルでは、視認性の向上に役立つ。

関連タグ

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

まとめ

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