【HTML】テーブルに見出しをつけるcaptionタグの使い方！位置変更やデザインも解説

HTMLで表（テーブル）を作成する際、その表が「何を表しているのか」をユーザーに示すことは非常に重要です。

見出しタグ（h2など）を直前に置くだけでも意味は通じますが、HTMLには表専用のタイトルタグである<caption>（キャプション）が用意されています。

このcaptionタグを適切に使うことで、視覚的に分かりやすくなるだけでなく、スクリーンリーダーなどの音声読み上げソフトを利用するユーザーや、検索エンジンに対しても親切な設計となります。

この記事では、<caption> タグの基本的な書き方から、CSSを使ってタイトルの位置を下に移動させたり、おしゃれにデザインしたりする方法まで詳しく解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

captionタグの基本と正しい記述位置
1. 必ずtableタグの直下に記述する
キャプションの位置を変更する方法（CSS）
1. タイトルを表の下に配置する（caption-side）
2. タイトルの文字配置を調整する（text-align）
キャプションをおしゃれにデザインする応用テクニック
1. テーブルと一体化させたデザイン
2. キャプションに画像を入れることも可能
captionタグを使う際の注意点とアクセシビリティ
1. 1つのテーブルにキャプションは1つまで
2. アクセシビリティ向上のために
HTML/CSSのスキルを活かして年収を上げる方法

captionタグの基本と正しい記述位置

<caption> タグは、テーブル全体のキャプション（タイトルや説明）を定義するための要素です。
非常にシンプルなタグですが、記述する場所には厳格なルールがあります。

ブラウザに正しく認識させるために、まずは基本的な構文とルールをマスターしましょう。

必ずtableタグの直下に記述する

<caption> タグは、必ず <table> タグの開始タグの直後に記述する必要があります。

<thead> や <tr> よりも前に書かなければならない点に注意してください。

1つのテーブルにつき、設置できるキャプションは1つだけです。

<table>
  <caption>2024年度 売上成績表</caption>
  <thead>
    <tr>
      <th>月</th>
      <th>売上</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4月</td>
      <td>100万円</td>
    </tr>
  </tbody>
</table>

コード解説

<table>：表全体の開始を示します。
<caption>...</caption>：ここに表のタイトルを記述します。デフォルトでは表の上部中央に表示されます。
<thead>, <tbody>: 表のヘッダー部分とボディ部分です。キャプションはこれらよりも上に記述します。

キャプションの位置を変更する方法（CSS）

デフォルトの状態では、キャプションは「表の上」かつ「中央揃え」で表示されます。
しかし、デザインによっては「表の下に注釈として入れたい」場合や、「左寄せにしたい」場合もあるでしょう。

HTMLの属性（alignなど）は現在廃止されているため、位置の調整には必ずCSSを使用します。

ここでは代表的なプロパティを紹介します。

タイトルを表の下に配置する（caption-side）

キャプションを表の上ではなく「下」に表示したい場合は、CSSの caption-side プロパティを使用します。

<style>
  .bottom-caption {
    caption-side: bottom; /* キャプションを下に配置 */
  }
</style>

<table class="bottom-caption">
  <caption>※データは2024年12月時点のものです</caption>
  <tr>
    <td>データA</td>
    <td>データB</td>
  </tr>
</table>

コード解説

caption-side: bottom;：このCSSを指定することで、HTMLの記述順序に関わらず、キャプションが表の「下側」に表示されます。
caption-side: top;：こちらが初期値です。表の上に表示されます。
注釈や出典元などを記載する場合に、この下配置がよく利用されます。

タイトルの文字配置を調整する（text-align）

キャプションの文字を左寄せや右寄せにしたい場合は、通常のテキストと同様に text-align プロパティを使います。

<style>
  caption {
    text-align: left; /* 左寄せ */
    /* text-align: right; 右寄せ */
    /* text-align: center; 中央寄せ（初期値） */
  }
</style>

コード解説

text-align: left;：キャプションのテキストを左端に寄せます。表の幅に合わせて配置されます。
表の幅（width）が狭い場合、キャプションもその幅の中で改行されることに注意してください。

キャプションをおしゃれにデザインする応用テクニック

単に文字を表示するだけでなく、背景色を付けたり枠線を引いたりすることで、より見やすく魅力的なテーブルデザインを作ることができます。

ここでは、よく検索される「枠線（border）との組み合わせ」や「目立つ見出しデザイン」のサンプルを紹介します。

テーブルと一体化させたデザイン

キャプションに背景色をつけ、テーブルの一部であるかのように見せるデザインです。

<style>
  .styled-table {
    border-collapse: collapse;
    width: 100%;
  }
  .styled-table caption {
    background-color: #333; /* 背景を黒に */
    color: #fff;            /* 文字を白に */
    padding: 10px;          /* 内側の余白 */
    font-weight: bold;      /* 太字 */
    text-align: left;       /* 左寄せ */
    border-top-left-radius: 5px;  /* 角を丸く */
    border-top-right-radius: 5px;
  }
  .styled-table th, .styled-table td {
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<table class="styled-table">
  <caption>製品スペック一覧</caption>
  <tr>
    <th>製品名</th>
    <td>Super Widget X</td>
  </tr>
</table>

コード解説

background-color / color：キャプションの背景色と文字色を変更し、見出しとして目立たせています。
padding: 10px;：文字の周りに余白を持たせ、窮屈な見た目になるのを防ぎます。
border-radius：キャプションの上部の角を丸くすることで、モダンで柔らかい印象を与えています。

キャプションに画像を入れることも可能

<caption> タグの中には、テキストだけでなく画像（<img>）を含めることも可能です。

アイコン画像をタイトルの横に配置したい場合などに有効です。

<table>
  <caption>
    <img src="icon.png" alt="" width="20" height="20" style="vertical-align: middle;">
    アクセスランキング
  </caption>
  <!-- テーブルの中身 -->
</table>