<caption>: 表キャプション要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<caption>HTML の要素で、表のキャプション(またはタイトル)を指定します。

試してみましょう

属性

この要素にはグローバル属性があります。

非推奨の属性

以下の属性は非推奨であり、使用するべきではありません。以下に記述しているのは、既存コードを更新する際の参考や、歴史的な関心としてのためのみです。

align 非推奨;

この列挙型属性は caption 要素の、自身の指し示す table 要素を基準とした相対的な位置を指定します。以下の値が指定できます。

left

キャプションを表の左側に表示します。

top

キャプションを表の上側に表示します。

キャプションを表の右側に表示します。

bottom

キャプションを表の下側に表示します。

警告: この属性は非推奨ですので使用しないでください。<caption> 要素にスタイルを適用するには、CSS プロパティの caption-side および text-align を使用してください。

使用上の注意

<caption> 要素は親である <table> 要素の最初の子とする必要があります。

<caption> を持つ <table> 要素が <figure> 要素の唯一の子孫である場合は、 <figcaption> 要素を <caption> の代わりに使用してください。

表の background-color はキャプションを含みません。両方の背景を同じ色にしたい場合は、background-color<caption> 要素にも追加してください。

このシンプルな例は、キャプションを含む票を表します。

html
<table>
  <caption>
    Example Caption
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>

技術的概要

コンテンツカテゴリー なし
許可されている内容 フローコンテンツ
タグの省略 要素の直後に ASCII 空白文字やコメントが続かない場合、終了タグは省略可能です。
許可されている親要素 <table> 要素で、その最初の子要素としてのみ配置可能。
暗黙の ARIA ロール caption
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLTableCaptionElement

仕様書

Specification
HTML
# the-caption-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caption
align
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.

関連情報