<th>: TH 要素
最終更新：2026-10-13
<th>TH 要素
行や列を表すテーブルの見出しセルです。既定では太字・中央寄せで、アクセシビリティの意味を持ちます。
| カテゴリ | テーブル |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </th> タグ |
| ステータス | 標準 |
📝 構文
<th scope="col">列の見出し</th>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
scope | Scope: col, row, colgroup or rowgroup. | |
colspan | Number of columns to span. | |
rowspan | Number of rows to span. | |
headers | IDs of related header cells (complex tables). | |
abbr | Abbreviated title for screen readers. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <th> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： scope はスクリーンリーダーがテーブルを正しく読む助けになります。可能な限り設定しましょう。
❓ よくある質問
Qth の scope 属性は何のためですか？
A
scope='col'/row は、その表頭が列と行のどちらに作用するかを宣言します。スクリーンリーダーはこれをもとに「列頭＋行頭＋データ」の完全な文脈でセルを読み上げます。単純な表ならブラウザが自動推論できますが、行列が混在したりセルが結合されたりする複雑な表では、scope の明示が必須です。Qth は tbody の中でも使えますか？
A使えます。行頭のカテゴリーセル（各行の1列目の「氏名」「年齢」など）は、
<th scope='row'> であるべきです。それはその行の表頭だからです。th は thead 専用ではなく、「そのセルが行や列の属性を説明しているか」で判断します。Qth のデフォルトスタイルは変えられますか？
A変えられます。デフォルトの中央寄せと太字はブラウザのスタイルシートの挙動で、CSS で完全に上書きできます：
th { text-align: left; font-weight: normal; }。スタイルを変えても th の意味上の価値は損なわれません。「太字が不要だから」と td に格下げしないでください。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
