<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 Standard
# the-caption-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報