caption要素
caption要素は、表(テーブル)のタイトルを表す要素。
カテゴリー | どのカテゴリーにも属さない。 |
---|---|
コンテキスト | table要素内の1つ目の子要素として使用できる。 |
コンテンツ・モデル |
フロー・コンテンツを内包できる。 ただし、table要素を子孫要素に持つことはできない。 |
属性 | グローバル属性。 |
ブラウザ対応 |
要点
- caption要素は、親要素がtable要素であれば、表のタイトルを表す要素である。
- caption要素は、table要素の1つ目の子要素として配置する。
- ほとんどのブラウザは、caption要素内のテキストを、表の上中央に表示する。
- figure要素の子要素が、figcaption要素とtable要素だけの場合、caption要素を省略する。
サンプルコード
表のタイトルを指定
<table>
<caption>表のタイトル</caption>
<tr>
<th>見出しセル</th>
<th>見出しセル</th>
<th>見出しセル</th>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
<tr>
<td>データセル</td>
<td>データセル</td>
<td>データセル</td>
</tr>
</table>
figure要素の子要素が、figcaption要素とtable要素だけのとき
figure要素の子要素が、figcaption要素とtable要素だけの場合、caption要素を省略する。
<figure> <figcaption>表のタイトル</figcaption> <table> <tr> <th>見出しセル</th> <th>見出しセル</th> <th>見出しセル</th> </tr> <tr> <td>データセル</td> <td>データセル</td> <td>データセル</td> </tr> <tr> <td>データセル</td> <td>データセル</td> <td>データセル</td> </tr> </table> </figure>
サンプル
表のタイトルを指定
HTMLソースコード
<table border="1"> <caption>表のタイトル</caption> <tr> <th>見出しセル</th> <th>見出しセル</th> <th>見出しセル</th> </tr> <tr> <td>データセル</td> <td>データセル</td> <td>データセル</td> </tr> <tr> <td>データセル</td> <td>データセル</td> <td>データセル</td> </tr> </table>
実際の表示
見出しセル | 見出しセル | 見出しセル |
---|---|---|
データセル | データセル | データセル |
データセル | データセル | データセル |
表タイトル付加、及び、グループ分け
HTMLソースコード
<table border="1"> <caption style="background-color: red">表のタイトル</caption> <colgroup span="1" style="background-color: lime"></colgroup> <colgroup span="2" style="background-color: aqua"></colgroup> <colgroup span="2" style="background-color: silver"></colgroup> <thead style="background-color: fuchsia"> <tr> <th>見出しセル</th> <th>見出しセル</th> <th>見出しセル</th> <th>見出しセル</th> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> <td>データセル</td> <td>データセル</td> <td>データセル</td> <td>データセル</td> </tr> <tr> <td>データセル</td> <td>データセル</td> <td>データセル</td> <td>データセル</td> <td>データセル</td> </tr> </tbody> <tfoot style="background-color: yellow"> <tr> <td>データセル</td> <td>データセル</td> <td>データセル</td> <td>データセル</td> <td>データセル</td> </tr> </tfoot> </table>
実際の表示
見出しセル | 見出しセル | 見出しセル | 見出しセル | 見出しセル |
---|---|---|---|---|
データセル | データセル | データセル | データセル | データセル |
データセル | データセル | データセル | データセル | データセル |
データセル | データセル | データセル | データセル | データセル |