caption 要素表組みのタイトルを表す

caption 要素は表組みのタイトルを表します。

HTML 4.01 などでの caption 要素では、インライン要素のみを内包することが可能でしたが、HTML5 における caption 要素は、コンテンツモデルがフロー・コンテンツとなったことで、table 要素を除くフロー・コンテンツを内包することが可能になりました。

これによって、表組みのタイトルとなるテキストだけでなく、表組みに関する詳細な説明なども入れることが可能になっています。

HTML5 仕様書においては、もし、table 要素が、figure 要素に内包されている状態で、figure 要素の内容この table 要素と figcaption 要素のみとなっている場合、figcaption 要素をキャプションを表すのに使用し、caption 要素は省略すべきとされています。

サンプルソースを見る

caption 要素の仕様

カテゴリ
  • なし
コンテンツモデル

ただし、table 要素を子孫に持つことはできません。

この要素を使用できる文脈

table 要素の最初の子要素として

この要素で使用できる属性
DOM インタフェース
interface HTMLTableCaptionElement : HTMLElement {};

caption 要素のサンプルソース

<table>
 <caption>
  <p><strong>1年1組 生徒名簿</strong></p>
  <p>この表は1年1組の生徒名簿です。列1に出席番号、列2に氏名が入り、生徒1名につき1行となります。</p>
 </caption>
 <thead>
  <tr>
   <th>出席番号</th>
   <th>氏名</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>01</td>
   <td>日本太郎</td>
   …省略…
  </tr>
 </tbody>
</table>
<!-- table 要素が figure 要素内で唯一の子要素の場合、figcaption 要素を使用するべきです -->
<figure>
 <figcaption>
  <p><b>生徒名簿</b></p>
  <p>この表は1年1組の生徒名簿です。列1に出席番号、列2に氏名が入り、生徒1名につき1行となります。</p>
 </figcaption>
 <table summary="1年1組の生徒名簿">
  <thead>
   <tr>
    <th>出席番号</th>
    <th>氏名</th>
   </tr>
  </thead>
   …省略…
 </table>
</figure>

W3C HTML5 仕様書

4.9.2 The caption element