HTMLのthタグとtdタグの違い｜見出しセルの考え方を初心者向けに解説

1. thタグとは何か

1. thタグとは何か

thタグはHTMLの表（table）の中で「見出しセル」を作るためのタグです。見出しセルとは、各列や行の内容を説明するタイトルの部分で、表の構造を理解しやすくする役割があります。検索エンジンもthタグの内容を重要視するので、SEO対策としても効果的です。

<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>住所</th>
    </tr>
    <tr>
        <td>田中太郎</td>
        <td>25</td>
        <td>東京都</td>
    </tr>
</table>

2. tdタグとは何か

2. tdタグとは何か

tdタグはHTMLの表の中で「データセル」を作るためのタグです。実際の情報や値を入れる部分で、見出しではありません。tdタグを使うことで、表の各行・各列に情報を整理して表示できます。

<table border="1">
    <tr>
        <td>りんご</td>
        <td>赤</td>
        <td>100円</td>
    </tr>
    <tr>
        <td>みかん</td>
        <td>オレンジ</td>
        <td>80円</td>
    </tr>
</table>

3. thとtdの使い分けの基本ルール

3. thとtdの使い分けの基本ルール

thタグは「この列や行の意味を説明するセル」、tdタグは「実際のデータを入れるセル」と覚えておくと簡単です。thタグは1行目や1列目に使うことが多く、tdタグはその下や横のデータに使います。正しい使い分けは、表の見やすさだけでなく、アクセシビリティやSEOにも影響します。

<table border="1">
    <tr>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫</th>
    </tr>
    <tr>
        <td>鉛筆</td>
        <td>50円</td>
        <td>200本</td>
    </tr>
    <tr>
        <td>ノート</td>
        <td>120円</td>
        <td>150冊</td>
    </tr>
</table>

4. thタグの属性scopeで列や行を指定する

4. thタグの属性scopeで列や行を指定する

thタグにはscope属性を使うことができます。scope="col"は列の見出し、scope="row"は行の見出しを示します。これにより、スクリーンリーダーなどの支援技術でも表の構造を理解しやすくなります。

<table border="1">
    <tr>
        <th scope="col">科目</th>
        <th scope="col">得点</th>
    </tr>
    <tr>
        <th scope="row">国語</th>
        <td>80点</td>
    </tr>
    <tr>
        <th scope="row">算数</th>
        <td>90点</td>
    </tr>
</table>

5. thタグとtdタグの見た目の違いをカスタマイズ

5. thタグとtdタグの見た目の違いをカスタマイズ

thタグは太字で中央揃え、tdタグは通常文字で左揃えがデフォルトですが、CSSで自由に変更できます。表全体の見た目を整えて、より見やすくデザインすることができます。

<table border="1" style="border-collapse:collapse; text-align:center;">
    <tr>
        <th style="background-color:#f0f0f0;">名前</th>
        <th style="background-color:#f0f0f0;">年齢</th>
        <th style="background-color:#f0f0f0;">職業</th>
    </tr>
    <tr>
        <td>佐藤花子</td>
        <td>30</td>
        <td>教師</td>
    </tr>
    <tr>
        <td>鈴木一郎</td>
        <td>40</td>
        <td>エンジニア</td>
    </tr>
</table>

6. thタグを使うとSEOにも効果的

6. thタグを使うとSEOにも効果的

検索エンジンは表の構造を理解するときにthタグを重要視します。適切に見出しセルを設定することで、商品リストや価格表などの情報が検索結果で正しく認識され、SEO効果を高めることができます。

<table border="1">
    <tr>
        <th>商品名</th>
        <th>カテゴリ</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>ノートパソコン</td>
        <td>電子機器</td>
        <td>100,000円</td>
    </tr>
    <tr>
        <td>スマートフォン</td>
        <td>電子機器</td>
        <td>80,000円</td>
    </tr>
</table>

7. 実際の表作りでのthとtdのポイント

7. 実際の表作りでのthとtdのポイント

表を作るときはまず列や行の見出しをthタグで設定し、その下や横のデータをtdタグで埋めるという順序で作成するとわかりやすくなります。こうすることで、見出しが明確でデータが整理された、初心者でも理解しやすい表になります。

<table border="1">
    <tr>
        <th>社員名</th>
        <th>部署</th>
        <th>入社年</th>
    </tr>
    <tr>
        <td>山田太郎</td>
        <td>営業</td>
        <td>2018</td>
    </tr>
    <tr>
        <td>田中花子</td>
        <td>総務</td>
        <td>2020</td>
    </tr>
</table>

まとめ

まとめ

今回の記事では、HTMLのテーブルにおけるthタグとtdタグの違いについて初心者向けに詳しく解説しました。まず、thタグは表の見出しセルとして使用され、列や行の内容を説明する役割を持つこと、tdタグはその下や横に並ぶデータセルとして実際の情報を入力するためのタグであることを学びました。thタグはデフォルトで太字・中央揃えになり、tdタグは通常文字・左揃えですが、CSSを活用することで見た目を自由にカスタマイズできることも理解しました。また、thタグにはscope属性を使って列や行を明示的に指定できるため、スクリーンリーダーなどの支援技術にも優しい設計が可能である点も重要なポイントです。

さらに、検索エンジンはテーブルの構造を理解する際にthタグを重視するため、商品リストや価格表、社員情報などを整理して表示する際にはSEO的にもメリットがあることを学びました。表の作成手順としては、まず列や行の見出しをthタグで設定し、その下や横にtdタグでデータを入力することで、初心者でも分かりやすく、整理された表を作成できることも理解できました。

具体例として、商品名・価格・在庫などの簡単な表から社員情報、得点表まで様々なサンプルを紹介し、実際にブラウザで確認することで、thとtdの違いや役割、見た目の違い、カスタマイズ方法までしっかり体感できる内容になっています。

 <table border="1" style="border-collapse:collapse; text-align:center;"> <tr> <th style="background-color:#f8f9fa;">商品名</th> <th style="background-color:#f8f9fa;">価格</th> <th style="background-color:#f8f9fa;">在庫</th> </tr> <tr> <td>消しゴム</td> <td>30円</td> <td>500個</td> </tr> <tr> <td>ボールペン</td> <td>100円</td> <td>300本</td> </tr> </table>