HTML Living Standard/th

th 要素

<th> 要素は、表（<table>）内の「ヘッダーセル」を定義するために使用されます。ヘッダーセルは通常、表の列や行の内容を説明するラベルとして機能します。

基本構造

<th> 要素は、<tr>（行）要素内で使用され、以下のような親要素の中に配置されます：

<thead>: 表のヘッダー部分。
<tbody>: 表の本文部分で特定の列や行を説明する場合。
<tfoot>: 表のフッター部分。

<th> 要素の中には、テキストや他のインライン要素を記述できます。

使用例

以下は、<th> 要素を使用した簡単な表の例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Table Header Example</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
          <th>在庫状況</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ノートパソコン</td>
          <td>100,000円</td>
          <td>在庫あり</td>
        </tr>
        <tr>
          <td>スマートフォン</td>
          <td>80,000円</td>
          <td>在庫なし</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

属性

<th> 要素は、以下の属性を使用して動作や表示をカスタマイズできます。

グローバル属性

<th> 要素は、HTML のグローバル属性を使用できます：

class: CSS クラス名を指定します。
id: 一意の識別子を指定します。
style: インラインスタイルを指定します。

特別な属性

scope
- ヘッダーセルの範囲を指定します。
- 値：row（行全体を対象）、col（列全体を対象）、rowgroup（行グループを対象）、colgroup（列グループを対象）。
例：
```
<th scope="col">商品名</th>
```
abbr
- ヘッダーセルの省略形を指定します。
例：
```
<th abbr="価格">商品価格</th>
```
headers
- セルが関連付けられるヘッダーセルの ID を指定します。
例：
```
<th id="price">価格</th>
```

スタイリングの例

CSS を使ってヘッダーセルをスタイリングする例を示します：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Styled Table Headers</title>
    <style>
      th {
        background-color: #f4f4f4;
        font-weight: bold;
        text-align: center;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>名前</th>
          <th>年齢</th>
          <th>職業</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>田中 太郎</td>
          <td>30</td>
          <td>エンジニア</td>
        </tr>
        <tr>
          <td>鈴木 花子</td>
          <td>25</td>
          <td>デザイナー</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

アクセシビリティ

<th> 要素は、アクセシビリティを向上させるための重要な役割を果たします。スクリーンリーダーなどがヘッダーセルとデータセルを関連付けることで、表をより分かりやすく読み上げます。

以下のポイントを考慮してください：

scope 属性を適切に設定:
ヘッダーセルの対象範囲を明確にします。
```
<th scope="col">価格</th>
```
headers 属性を使用:
複雑な表では、データセルとヘッダーセルを関連付けます。
```
<td headers="price">100,000円</td>
```

練習問題

練習1: <th> 要素を使用して、3列のヘッダーを持つ表を作成してください。
練習2: ヘッダーセルに背景色を追加し、文字を中央揃えにする CSS を記述してください。
練習3: 複雑な表において、scope と headers 属性を使ってヘッダーセルとデータセルを関連付けてみましょう。