<caption></caption>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 table要素の最初の子要素として
内容 フロー・コンテンツ（ただし、table要素は含められない）

caption要素は、表のキャプション（タイトルや説明）を表します。この要素は、table要素の子要素として使用します。


<caption>表のキャプションを表します</caption>

caption要素の配置位置

caption要素は、table要素内の最初の部分（table開始タグの直後）に1つだけ配置することができます。

<table>

<caption>表のタイトル</caption>

<tr>
<td>表の内容</td>
</tr>
...

caption要素の内容について

caption要素の内容には、（従来で言う）ブロックレベル要素も配置できるようになりました。

次の例では、タイトルの下にp要素（説明文）を配置しています。

<caption>
<strong>表のタイトル</strong>
<p>表に関する説明文。</p>
</caption>

figure要素内に配置される表の場合

figure要素内にtable要素だけが配置される場合は、caption要素の代わりにfigcaption要素を使用することが推奨されています。

<figure>

<figcaption>表のタイトル</figcaption>

<table>
<tr>
<td>表の内容</td>
</tr>
...
</table>

</figure>

要素のデフォルトスタイル

一般的なブラウザでは、この要素内のテキストは表の上部中央に表示されます。

表のタイトル
表の内容 表の内容 表の内容
  • 上記の例は、スタイルシートで表の境界線を表示しています。
旧HTMLからの変更点
  • HTML5：align属性が廃止されました。
  • HTML5：（従来で言う）ブロックレベル要素を含められるようになりました。

使用例

  • 以下の例では、次のスタイルシートを指定して表の境界線を表示しています。
-----
table, th, td {
border: 1px #000000 solid;
}
-----
タイトルのみを入れた例

<table>
<caption>表のタイトル</caption>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ2-1</td>
<td>データ3-1</td>
</tr>
<tr>
<td>データ1-2</td>
<td>データ2-2</td>
<td>データ3-2</td>
</tr>
</table>
表示例
表のタイトル
見出し1 見出し2 見出し3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2
表の説明も入れた例

<table>

<caption>
<strong>8月の予約状況</strong>
<p>○=余裕あます、△=残りわずか、×=満室です</p>
</caption>

<tr>
<td></td>
<th>Aタイプ</th>
<th>Bタイプ</th>
<th>Cタイプ</th>
</tr>
<tr>
<td>8月12日</td>
<td>○</td>
<td>○</td>
<td>△</td>
</tr>
<tr>
<td>8月13日</td>
<td>△</td>
<td>△</td>
<td>×</td>
</tr>
<tr>
<td>8月14日</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
</table>
表示例
8月の予約状況

○=余裕あます、△=残りわずか、×=満室です
Aタイプ Bタイプ Cタイプ
8月12日 ○ ○ △
8月13日 △ △ ×
8月14日 × × ×
  • caption要素の幅は、表全体の幅に合わされます。