HTML <caption>

<caption> は表にキャプション（表題）を付けるHTMLタグです。caption要素の使い方をご紹介します。

書式

<caption>
  <!-- Flow content, but with no descendant table elements. -->
</caption>

開始タグ

caption要素の開始タグは省略できません。

終了タグ

caption要素の終了タグは省略できません。

開始タグと終了タグの間にはインライン要素を含めることができます。属性はすべて省略可能です。

TABLE要素タイプの内容モデルであり、<table> と </table> の間に0回または1回だけ現れます。

内容

caption 要素の内容にはフローコンテンツ（ただし、table 要素を除く）を含めることができる。具体的には次の要素である。

属性

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

data-*

カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScript から要素独自の属性を読み取るための仕組みである。

dir

テキストを記述する方向を指定する。

dir属性
値	値
ltr	左から右へ記述する (日本語や英語など)
rtl	右から左へ記述する (アラビア語など)
auto	ユーザーエージェントに決定させる

id

HTML文書内の要素で一意な識別子を指定する。

lang

この文書が何語で記述されているかを指定する。

lang属性
値	説明
ar	アラビア語
de	ドイツ語
en	英語
en-AU	英語（オーストラリア）
en-CA	英語（カナダ）
en-NZ	英語（ニュージーランド）
en-SG	英語（シンガポール）
en-UK	英語（イギリス）
en-US	英語（アメリカ）
es	スペイン語
fr	フランス語
fr-CA	フランス語（カナダ）
fr-FR	フランス語（フランス）
it	イタリア語
ja	日本語
ja-JP	日本語（日本）
ko	朝鮮語・韓国語
ko-KP	朝鮮語（北朝鮮）
ko-KR	韓国語（韓国）
pt	ポルトガル語
pt-BR	ポルトガル語（ブラジル）
pt-PT	ポルトガル語（ポルトガル）
ru	ロシア語
th	タイ語
th-TH	タイ語（タイ）
tr	トルコ語
vi	ベトナム語
zh	中国語
zh-cmn-Hans	中国語・普通話・簡体字
zh-cmn-Hans-CN	中国語・普通話・簡体字（中国大陸）
zh-cmn-Hant	中国語・普通話・繁体字
zh-cmn-Hant-TW	中国語・台湾華語・繁体字（台湾）
zh-yue-Hant	中国語・広東語・繁体字
zh-yue-Hant-HK	中国語・広東語・繁体字（香港）

<html lang="ja">

ondblclick

caption 要素をダブルクリックしたとき実行する JavaScript を指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

title

要素に関するアドバイザリー情報を指定する。

キャプションの位置

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: 要素内のコンテンツ（タグを含む）

参考文献

Web Hypertext Application Technology Working Group 2023. Tabular data. HTML Living Standard

日本産業標準調査会 (2022) 日本産業規格