HTML要素 ・ リスト・テーブル
<th>
表の見出しセル
表の見出しとなるセルです。ブラウザは既定で太字・中央揃えで表示します。
01
サンプルコード
HTML
1<table>
2 <tr><th scope="col">サイズ</th><th scope="col">価格</th></tr>
3 <tr><td>S</td><td>¥400</td></tr>
4 <tr><td>M</td><td>¥480</td></tr>
5</table>
CSS
1table {
2 border-collapse: collapse;
3}
4th, td {
5 padding: 6px 16px;
6 border: 1px solid #ccc;
7}
8th {
9 background: #7d5411;
10 color: #fff;
11}
02
実行結果
ブラウザでの表示
03
解説
th は "table header" の略で、列や行の見出しになるセルです。データの意味を示すセルには th を使います。
scope 属性で、その見出しが列（col）と行（row）のどちらの見出しかを示せます。読み上げソフトがセルと見出しを正しく結びつけられるようになります。
見た目が太字になるのはブラウザの既定のスタイルです。CSSで自由に変更できます。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
scope | col（列の見出し）/ row（行の見出し） |
colspan | 横方向に結合するセルの数 |
rowspan | 縦方向に結合するセルの数 |
abbr | 見出しの短い別名 |
行の見出しを付ける
各行の先頭を見出しにする場合は scope="row" を指定します。
HTML
1<tr>
2 <th scope="row">定休日</th>
3 <td>水曜日</td>
4</tr>
注意点
- 01太字にしたいだけのセルに th を使わないでください。
- 02見出しにあたるセルを td で書くと、表の構造が伝わりません。