<caption></caption>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
利用場所 table要素の最初の子要素として
内容 フロー・コンテンツ（ただし、table要素は含められない）

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


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

caption要素の配置位置

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

<table border="1">

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

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

caption要素の内容について

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

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

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

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

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

<figure>

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

<table border="1">
<tbody>
<tr>
<td>表の内容</td>
</tr>
...
</tbody>
</table>

</figure>

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

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

表のタイトル
表の内容 表の内容 表の内容
HTML5における変更点
  • align属性が廃止されました。
  • （従来で言う）ブロックレベル要素を含められるようになりました。

使用例

タイトルのみを入れた例

<table border="1">
<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 border="1">

<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要素の幅は、表全体の幅に合わされます。