caption 要素表組みのタイトルを表す
caption 要素は表組みのタイトルを表します。
HTML 4.01 などでの caption 要素では、インライン要素のみを内包することが可能でしたが、HTML Standard 仕様における caption 要素は、コンテンツモデルがフロー・コンテンツとなったことで、table 要素を除くフロー・コンテンツを内包することが可能になりました。
これによって、表組みのタイトルとなるテキストだけでなく、表組みに関する詳細な説明なども入れることが可能になっています。
もし、table 要素が、figure 要素に内包されている状態で、figure 要素の内容この table 要素と figcaption 要素のみとなっている場合、figcaption 要素をキャプションを表すのに使用し、caption 要素は省略するといったマークアップの手法が考えられます。詳しくはサンプルソースをご覧ください。
caption 要素の仕様
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>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |