<th>タグについて

<th>とは？

<th>タグは、HTMLの表（<table>）で見出しセル（ヘッダーセル）を定義するためのタグです。
通常のデータセル（<td>）とは異なり、太字・中央揃えで表示されるのが特徴です。

基本構文

<table>
  <tr>
    <th>項目名1</th>
    <th>項目名2</th>
  </tr>
</table>
  

主な用途

• 表の先頭行に列のタイトルを表示
• 行の先頭に行ラベルを表示することも可能
• スクリーンリーダーやSEOにおいて意味的に重要

使用例

<table border="1">
  <tr>
    <th>氏名</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田</td>
    <td>25</td>
  </tr>
</table>
  

主な属性

• scope：見出しが適用される範囲を指定（"col", "row", "colgroup", "rowgroup"）
• rowspan：縦方向にセルを結合
• colspan：横方向にセルを結合
• abbr：略語の展開（スクリーンリーダー向け）

scope属性の使用例

<th scope="col">商品名</th>
<th scope="row">2024年</th>
  

CSSによる装飾例

th {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
  

注意点

• <th>は<tr>の中で使う
• 見出しの構造はわかりやすく整えること
• ヘッダーを明確にすることでアクセシビリティが向上

まとめ

• <th>は表の見出しセルを表すタグ
• デフォルトで太字・中央揃え
• scope属性で意味を明確にできる
• 行・列の先頭に使用して表の構造をわかりやすく
• <td>と適切に使い分けることが重要