<caption> は表にキャプション(表題)を付けるHTMLタグです。caption要素の使い方をご紹介します。
タグ名、属性名および属性値は大文字と小文字を区別しない。開始タグ(<caption>
)および終了タグ(</caption>
)は省略できない。
<caption>
<!-- Flow content, but with no descendant table elements. -->
</caption>
TABLE要素タイプの内容モデルであり、<table> と </table> の間に0回または1回だけ現れます。
caption 要素の内容にはフロー・コンテンツ(ただし、table 要素を除く)を含めることができる。
caption 要素にはグローバル属性を指定することができる。
CSS の caption-side プロパティでキャプションの位置を指定できる。
表の上にキャプションを配置する例を次に示す。
<table style="caption-side: top">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
表の下にキャプションを配置する例を次に示す。
<table style="caption-side: bottom">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
なお、「JISX4051 日本語文書の組版方法」において、表のキャプションは表の上に配置するよう決められている。
11.6 表のキャプション及び注記処理
11.6.1 表のキャプション及び注記の配置位置及び組方向 表のキャプション及び注記の配置位置及び組方向は,次による。
a) キャプション及び注記の組方向は,表の全体の組方向と同一とする。
b) 表の全体が横書きのキャプションの配置位置は,表の全体の上側とし,表の全体の左右中央にそろえるか,又はキャプションの先頭を表の全体の左端からの指定された位置に配置する。表の全体が縦書きのキャプションの配置位置は,表の全体の右側とし,キャプションの先頭を表の全体の上端からの指定された位置に配置する。
JavaScript からは HTMLTableCaptionElement インタフェースを通じて caption 要素へアクセスできる。HTMLTableCaptionElement インタフェースは以下に示すプロパティを持つ。