HTML テーブルヘッダー

HTMLのテーブルヘッダーを使用すると、表内のデータの意味を明確にし、ユーザーやブラウザにとって理解しやすい構造を作ることができます。

1. HTML テーブルヘッダーの定義

テーブルのヘッダー（見出し）を定義するには、<th> タグを使用します。<th> は Table Header の略です。

デフォルトでは、ブラウザは <th> 要素内のテキストを太字（Bold）かつ中央揃え（Centered）でレンダリングします。

1.1 基本的なヘッダーの例

<table>
  <tr>
    <th>氏名</th>
    <th>職種</th>
    <th>拠点</th>
  </tr>
  <tr>
    <td>佐藤 健一</td>
    <td>Web開発者</td>
    <td>東京</td>
  </tr>
  <tr>
    <td>鈴木 舞</td>
    <td>UIデザイナー</td>
    <td>大阪</td>
  </tr>
</table>

2. 垂直方向のテーブルヘッダー (Vertical Table Headers)

ヘッダーは必ずしも一番上の行にある必要はありません。表の最初の列をヘッダーとして設定し、垂直方向の見出しを作ることも可能です。

これを実現するには、各行（<tr>）の最初の要素として <th> を配置します。

<table>
  <tr>
    <th>氏名:</th>
    <td>佐藤 健一</td>
  </tr>
  <tr>
    <th>職種:</th>
    <td>Web開発者</td>
  </tr>
  <tr>
    <th>拠点:</th>
    <td>東京</td>
  </tr>
</table>

3. テーブルヘッダーの配置 (Alignment)

デフォルトでは、テーブルヘッダーは中央揃えになります。これを左揃えや右揃えに変更したい場合は、CSSの text-align プロパティを使用します。

3.1 ヘッダーを左揃えにする例

th {
  text-align: left;
}

4. 複数列にまたがるヘッダー (Header for Multiple Columns)

1つのヘッダーが2つ以上の列にまたがるように設定するには、colspan 属性を使用します。

<table>
  <tr>
    <th colspan="2">連絡先情報</th>
  </tr>
  <tr>
    <th>氏名</th>
    <th>メールアドレス</th>
  </tr>
  <tr>
    <td>佐藤 健一</td>
    <td>[email protected]</td>
  </tr>
</table>

この例では、「連絡先情報」というヘッダーが2列分の幅を占有します。

5. テーブルキャプション (Table Caption)

<caption> タグを使用すると、テーブル全体にタイトル（キャプション）を追加できます。

<caption> タグは、必ず <table> タグの直後に配置しなければなりません。

<table style="width:100%">
  <caption>社員名簿</caption>
  <tr>
    <th>氏名</th>
    <th>職種</th>
  </tr>
  <tr>
    <td>佐藤 健一</td>
    <td>Web開発者</td>
  </tr>
</table>

[!TIP]
キャプションを使用することで、スクリーンリーダーなどの補助技術を利用しているユーザーが、その表が何についてのデータなのかを即座に把握できるようになり、アクセシビリティが大幅に向上します。

6. まとめ

HTMLテーブルのヘッダーに関連する主要な要素と属性は以下の通りです。

テーブルヘッダーを正しくマークアップすることは、単に見栄えを整えるだけでなく、検索エンジンや補助技術にデータの構造を正しく伝える「セマンティックなWeb」を実現するために不可欠なステップです。