thタグの使い方と表の見出しを適切に整理する方法をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

thの概要

表の見出しセルを定義する HTMLタグ

<th>見出し</th>

概要 thタグは、tableタグの中で表の見出しセルを定義するためのHTMLタグです。通常、行や列のタイトルを示し、デフォルトで太字かつ中央寄せになります。
  • テーブルの見出しを定義するために使用される。
  • tdとは異なり、デフォルトで太字＆中央寄せになる。
  • 視覚的なデザインだけでなく、スクリーンリーダーにも「見出し」として認識される。
  • 表に関するタグには、table、tr、th、td、thead、tbody、tfoot、captionがある。

thタグの基本的な使い方

以下の例では、thタグを使って基本的な表を作成しています。

<table border="1">
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>30</td>
        <td>エンジニア</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>25</td>
        <td>デザイナー</td>
    </tr>
</table>

実行例：

名前 年齢 職業
田中 30 エンジニア
佐藤 25 デザイナー

thタグの応用：列や行の見出し

行の見出しとしても使用できます。

<table border="1">
    <tr>
        <th></th>
        <th>数学</th>
        <th>英語</th>
        <th>理科</th>
    </tr>
    <tr>
        <th>田中</th>
        <td>80</td>
        <td>90</td>
        <td>85</td>
    </tr>
    <tr>
        <th>佐藤</th>
        <td>75</td>
        <td>88</td>
        <td>92</td>
    </tr>
</table>

実行例：

数学 英語 理科
田中 80 90 85
佐藤 75 88 92

注意事項

  • thタグはtr（行）の中でのみ使用できる。
  • デフォルトで太字＆中央寄せになるが、CSSで変更可能。
  • 行見出しとしても使用できるが、列見出しと区別するとよりわかりやすくなる。
  • スクリーンリーダーでは、thタグは通常のセルよりも「見出し」として認識される。

よくある質問

Q: thタグとtdタグの違いは？
A: thは見出しセルで、デフォルトで太字＆中央寄せ、tdは通常のデータセルです。
Q: thタグの位置を左寄せにするには？
A: CSSのtext-align: left; を適用すると左寄せになります。
Q: thタグの背景色を変更するには？
A: CSSのbackground-colorプロパティを適用します。
Q: thタグを使わずに見出しを作るべきですか？
A: いいえ、thタグを使うことで、表の構造が明確になり、スクリーンリーダーのアクセシビリティが向上します。

まとめ

  • thタグは、テーブルの見出しセルを定義する。
  • デフォルトで太字＆中央寄せされる。
  • 行見出しや列見出しに利用できる。
  • CSSでデザインをカスタマイズ可能。
  • スクリーンリーダーで見出しとして認識されるため、アクセシビリティ向上に役立つ。
スポンサーリンク