HTML / 要素

caption要素の使い方 — 表に名前をつける

caption要素は、表の題名や「何についての表か」を伝えるために使います。表のすぐ近くに説明があると、本文を読む人にも、読み上げソフトを使う人にも表の内容がわかりやすくなります。

先に結論

captionは、その表が何を示すのかを短く説明します。thは表の中で、行や列のどの見出しかを示します。2つは役割が違います。

captionはtableの最初の子要素として書きます。表の題名をCSSで下側に表示しても、HTMLではこの位置に置きます。

最小の例

<table>
  <caption>曜日ごとの図書館の開館時間</caption>
  <thead>
    <tr><th scope="col">曜日</th><th scope="col">開館時間</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">月曜日</th><td>9:00〜18:00</td></tr>
    <tr><th scope="row">火曜日</th><td>9:00〜18:00</td></tr>
  </tbody>
</table>

曜日ごとの図書館の開館時間
曜日	開館時間
月曜日	9:00〜18:00
火曜日	9:00〜18:00

この題名を読めば、表を見る前に「図書館がいつ開いているか」を知ることができます。表の中の「曜日」「開館時間」は列の見出しなので、別にthで表します。

captionはtableの中に置く

captionは、題名を付けたいtableの最初の子要素です。HTMLでは1つの表に1つだけ置きます。表の前後にある普通の段落は、表の題名として自動的に扱われません。

<table>
  <caption>月ごとの来館者数</caption>
  <!-- ここに表の行やセルを書く -->
</table>

表示する場所はCSSで変えられる

ふつう、題名は表の上に表示されます。caption-sideを使うと、下に表示できます。CSSで見た目の場所を変えても、captionはHTMLの表の先頭に置いたままです。

caption {
  caption-side: bottom;
}

figcaptionとの違い

captionは表の題名です。figcaptionは図や写真などをまとめるfigureの説明です。表がfigureの中身のすべてで、ほかにfigcaptionだけがある形では、表のcaptionではなくfigcaptionを使うようHTML Standardは勧めています。

よくある間違い

captionをtableの外に書く。表と題名の関係がHTMLで示されません。
表の題名をthにする。thは表の行や列の見出しに使います。
見た目を太字にしただけで表の題名にする。CSSの見た目だけでは表との関係は伝わりません。
画面から見えなくしたcaptionが、必ず読み上げソフトにも使われると思う。隠し方によっては支援技術からも見えず、表の名前にならない場合があります。

もう少し詳しく

ブラウザーは、表の名前としてcaptionの文字を支援技術へ渡すことがあります。画面に出る題名と、読み上げで表に入るときの案内は、ブラウザーや支援技術によって異なる場合があります。実際の環境でも確認しましょう。