HTML テーブルの表題 <caption> タグ

JPKODA 編集部 May 6, 2026

HTML の <caption> タグは、テーブル（表）に対してタイトルや説明文を提供するために使用されます。

重要なルール： <caption> タグは、必ず <table> タグの内部で最初の要素として配置しなければなりません。

1. `<caption>` タグの基本理解

<caption> タグは、HTML テーブルのタイトルや見出しを定義します。これにより、ユーザーがそのテーブルの目的を即座に理解するためのコンテキスト（Context）を提供します。

これはアクセシビリティ（Accessibility）の観点からも極めて重要な要素です。スクリーンリーダー（Screen Reader）はテーブルの内容を読み上げる際、このキャプションを最初にアナウンスすることで、視覚障害を持つユーザーに表の概要を伝えます。

1.1 基本構文

<caption> タグの基本的な使い方は以下の通りです。

<table>
  <caption>売上データ一覧</caption>
  <tr>
    <th>項目 1</th>
    <th>項目 2</th>
  </tr>
  <tr>
    <td>データ 1</td>
    <td>データ 2</td>
  </tr>
</table>

この例では、「売上データ一覧」がテーブルのタイトルとして表示されます。デフォルトでは、キャプションはテーブルの上部に中央揃えで表示されます。

2. `<caption>` タグの配置場所

<caption> タグは、必ず <table> の開始タグの直後に配置する必要があります。これ以外の場所に配置すると、HTML の規格として無効（Invalid）になります。

正しい配置例：

<table>
  <caption>正しいタイトルの位置</caption>
  <tr>
    <th>見出し</th>
  </tr>
</table>

誤った配置例：

<table>
  <tr>
    <th>見出し</th>
  </tr>
  <caption>誤ったタイトルの位置</caption>
</table>

ブラウザによっては誤った位置でもレンダリング（Rendering）されることがありますが、標準違反となり、アクセシビリティツールや他のソフトウェアで予期せぬ挙動を引き起こす原因となります。

3. アクセシビリティの考慮事項

<caption> タグは、障害を持つユーザーがテーブルにアクセスできるようにする上で不可欠な役割を果たします。スクリーンリーダーはキャプションを使用して表の目的を宣言し、ユーザーがデータを効率的にナビゲートして理解できるようにします。

スクリーンリーダー専用テキストを含む例：

<table>
  <caption>
    月次売上レポート - 2024年1月
    <span class="sr-only">(この表は、2024年1月における製品カテゴリ別の売上データを示しています。)</span>
  </caption>
  <tr>
    <th>製品カテゴリ</th>
    <th>売上高 ($)</th>
  </tr>
</table>

この例では、sr-only（スクリーンリーダー専用）クラスを持つ <span> タグを追加しています。これにより、画面上には表示せずに、スクリーンリーダーを使用するユーザーにのみ追加のコンテキストを提供できます。
注：.sr-only クラスは CSS で定義して非表示にする必要があります。

4. `<caption>` タグのスタイリング

デフォルトではテーブルの上部に中央揃えで表示されますが、CSS を使用して外観を自由にカスタマイズできます。

CSS スタイリングの例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 基礎的なテーブルスタイルは省略 */
caption {
  caption-side: bottom; /* タイトルを下部に移動 */
  font-style: italic;   /* 斜体 */
  color: gray;          /* グレー */
  text-align: right;    /* 右揃え */
}
</style>
</head>
<body>
    <table>
      <caption>表 1：従業員情報</caption>
      <tr>
        <th>氏名</th>
        <th>役職</th>
      </tr>
    </table>
</body>
</html>

解説：

caption-side: bottom;: キャプションをテーブルの下部に移動させます。
他にも font-size、font-weight、background-color などの CSS 属性を使用して、デザインを細かく調整可能です。

5. 応用的な使い方：複雑なキャプション

キャプションにはプレーンテキストだけでなく、他の HTML 要素を含めることができます。これにより、よりリッチな情報を提供できます。

リンクを含む例：

<table>
  <caption>
    売上データ - <a href="#">詳細レポートを表示</a>
  </caption>
</table>

このキャプションには詳細レポートへのハイパーリンクが含まれており、ユーザーが関連情報に簡単にアクセスできるようになっています。

画像を含む例：

<table>
  <caption>
    製品比較 <img src="logo.png" alt="会社ロゴ">
  </caption>
</table>

ロゴ画像などをキャプションに含めることで、視覚的な要素を追加することも可能です。

6. 実戦的なサンプルとデモ

6.1 例 1：シンプルなデータテーブル

<table>
  <caption>学生成績表</caption>
  <tr>
    <th>氏名</th>
    <th>評価</th>
  </tr>
  <tr>
    <td>アリス</td>
    <td>A</td>
  </tr>
</table>

「学生成績表」というタイトルにより、表の用途が明確に示されています。

6.2 例 2：財務データテーブル

<table>
  <caption>企業の四半期収益（単位：百万ドル）</caption>
  <tr>
    <th>四半期</th>
    <th>収益</th>
  </tr>
</table>

キャプションの中で内容だけでなく「単位」についても言及することで、データの読み間違いを防ぐコンテキストを提供しています。

1. <caption> タグの基本理解