HTML <caption>

<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

JavaScript からは HTMLTableCaptionElement インタフェースを通じて caption 要素へアクセスできる。HTMLTableCaptionElement インタフェースは以下に示すプロパティを持つ。

title
title属性
lang
lang属性
translate
translate属性
dir
dir属性
hidden
hidden属性
inert
inert属性
accessKey
accessKey属性
accessKeyLabel
要素に割り当てられたアクセスキー
draggable
draggable属性
spellcheck
spellcheck属性
autocapitalize
autocapitalize属性
innerText
要素内のコンテンツ(タグを含まない)
outerText
要素内のコンテンツ(タグを含む)

関連記事

参考文献