Webサイトにおける情報の整理において、表（テーブル）は非常に重要な役割を果たします。
特にデータを一覧で表示する際、どのデータが何を意味しているのかを明確にするのが「thタグ」の役割です。
適切にマークアップされた表は、ユーザーにとって読みやすいだけでなく、検索エンジンやスクリーンリーダーにとっても理解しやすいものとなります。
本記事では、thタグの基本的な使い方から、アクセシビリティを向上させるための属性活用まで、詳しく解説していきます。
thタグの基本的な役割とtdタグとの違い
HTMLで表を作成する際、主に用いられるのが<table>、<tr>、<th>、<td>の4つのタグです。
<th>は「Table Header」の略であり、表の見出しとなるセルを定義するために使用されます。
一方で、<td>は「Table Data」の略で、見出しに対応する具体的なデータを入れるためのセルです。
ブラウザのデフォルト設定では、<th>タグ内のテキストは太字で中央揃えに表示されることが一般的です。
しかし、単に見た目を太字にしたいという理由だけで<th>を使用するのは避けるべきです。
重要なのは、そのセルが「データの内容を説明するラベル（見出し）」であるかどうかという点です。
thタグの基本構文
基本的な表の構造を、コード例とともに確認してみましょう。
<table>
<thead>
<tr>
<!-- 表の最上部を見出しとして定義 -->
<th>商品名</th>
<th>価格</th>
<th>在庫状況</th>
</tr>
</thead>
<tbody>
<tr>
<td>ノートPC</td>
<td>120,000円</td>
<td>あり</td>
</tr>
</tbody>
</table>商品名 価格 在庫状況
ノートPC 120,000円 ありscope属性による構造の明確化
thタグを使いこなす上で欠かせないのが、scope属性の設定です。
scope属性は、その見出しセルが「列（column）」に対しての見出しなのか、「行（row）」に対しての見出しなのかを指定します。
これにより、スクリーンリーダーなどの支援技術が、どのデータがどの見出しに関連付けられているかを正確に把握できるようになります。
縦方向の見出し：scope=”col”
表の最上段に見出しが並んでいる場合、各見出しにはscope="col"を指定します。
これは、その見出しが下方向のすべてのセルに関連していることを示します。
横方向の見出し：scope=”row”
表の左端に行ごとの見出しを配置する場合は、scope="row"を使用します。
例えば、複数の項目を比較する表などで、左端に項目名が並ぶ構造で非常に有効です。
<table>
<tr>
<th scope="col">プラン名</th>
<th scope="col">月額料金</th>
<th scope="col">容量</th>
</tr>
<tr>
<th scope="row">スタンダード</th>
<td>1,000円</td>
<td>10GB</td>
</tr>
<tr>
<th scope="row">プレミアム</th>
<td>3,000円</td>
<td>100GB</td>
</tr>
</table>複雑な表に対応するcolspanとrowspan
複数のセルにまたがる大きな見出しを作成したい場合には、colspan属性やrowspan属性を使用します。
colspanは水平方向（列）の結合、rowspanは垂直方向（行）の結合を行います。
これらを適切に使用することで、視覚的に整理された複雑なデータ構造を表現することが可能です。
セルの結合を利用したレイアウト例
例えば、複数の項目を一つのグループ見出しでまとめたい場合に便利です。
<table border="1">
<tr>
<th rowspan="2">地域</th>
<th colspan="2">売上</th>
</tr>
<tr>
<th>上半期</th>
<th>下半期</th>
</tr>
<tr>
<th>東京</th>
<td>500万円</td>
<td>600万円</td>
</tr>
</table>結合を行う際は、結合された分のセル数を考慮してマークアップを記述する必要があります。
記述を誤ると、表のレイアウトが崩れてしまい、ユーザーにとって理解しにくいものになるため注意が必要です。
アクセシビリティを高めるための高度な実装
Webアクセシビリティをより厳密に考慮する場合、id属性とheaders属性の組み合わせを検討することもあります。
これは、単純なscope属性だけでは構造が表現できないような、複雑にネストされた見出しを持つ表で特に有効です。
idとheadersによる関連付け
各見出しセルに一意のidを付与し、対応するデータセル側でheaders属性を用いて関連するidを指定します。
この手法により、支援技術を利用しているユーザーは、現在読み上げているデータがどの見出しに属しているかを確実に理解できます。
<table>
<tr>
<th id="category">カテゴリー</th>
<th id="item">項目名</th>
<th id="price">単価</th>
</tr>
<tr>
<td headers="category">食品</td>
<td headers="item">りんご</td>
<td headers="price">150円</td>
</tr>
</table>ただし、日常的なWeb制作においては、可能な限りシンプルな表構造を心がけ、scope属性で対応するのがベストプラクティスです。
構造が複雑になりすぎると、運用の手間が増えるだけでなく、かえって情報の誤認を招く恐れがあるからです。
表全体のアクセシビリティを支える要素
thタグを正しく使う以外にも、表のアクセシビリティを向上させる方法はいくつか存在します。
その一つが、<caption>タグの活用です。
<caption>は表のタイトルを示すためのタグであり、<table>タグの直後に配置します。
これにより、ユーザーは表の内容を読む前に、その表が何に関するデータなのかを即座に把握できます。
thead, tbody, tfootによる論理構造の分離
表のヘッダー部分、本体部分、フッター部分（合計など）をそれぞれ専用のタグで囲むことも重要です。
<thead>、<tbody>、<tfoot>を使用することで、HTML文書の構造がより明快になります。
これらのタグは、CSSによるスタイリングを効率化するだけでなく、長い表を印刷する際に各ページの冒頭に見出しを表示させるなどのメリットもあります。
レスポンシブデザインにおけるthタグの扱い
現代のWebサイト制作では、モバイル端末での表示、すなわちレスポンシブ対応が欠かせません。
デスクトップ画面では見やすい大きな表も、スマートフォンの狭い画面では横に突き抜けてしまうことがあります。
こうした問題を解決するために、CSSを使用してthタグの内容を効果的に表示する手法が用いられます。
data属性を利用した見出しの表示
CSSのcontentプロパティと、HTMLのdata-*属性を組み合わせる手法が一般的です。
画面サイズが小さい場合に表を縦並びに崩し、擬似要素を用いて各データの横に見出しを表示させることができます。
<!-- HTML側の記述例 -->
<td data-label="商品名">ノートPC</td>/* CSS側の記述例（抜粋） */
@media (max-width: 600px) {
td::before {
content: attr(data-label);
font-weight: bold;
display: block;
}
}このように実装することで、画面が狭くなっても「どの値がどの見出しに対応するか」という情報のつながりを維持できます。
アクセシビリティはソースコードの書き方だけでなく、デザインや表示形式の工夫によっても支えられています。
まとめ
HTMLのthタグは、単に表の見出しを太字にするための要素ではなく、データの構造を正しく伝えるための重要な意味（セマンティクス）を持っています。
scope属性を適切に付与し、必要に応じてcolspanやrowspanを活用することで、情報の伝達効率は飛躍的に向上します。
また、アクセシビリティを考慮したマークアップは、あらゆるユーザーにとって優しいWebサイトを作るための第一歩となります。
表を作成する際は、見た目の調整だけでなく、機械が読んでも理解できる「正しいマークアップ」を常に意識するようにしましょう。
今回ご紹介したテクニックを取り入れ、より高品質でアクセシブルなWebサイト制作を目指してください。