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

HTML の表キャプション要素 (<caption>) は、表のキャプション (またはタイトル) を指定するもので、使用される場合は常に <table> の最初の子要素として配置しなければなりません。スタイルや表との間の相対的な位置は、 CSS の caption-side および text-align プロパティを使用して変更することができます。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

属性

この要素は グローバル属性 を持ちます。

廃止された属性

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

align

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

left

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

top

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

right

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

bottom

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

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

使用上の注意

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

例

<caption> 要素の使用例については、<table> 要素のページを参照してください。

<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>

caption { 
  caption-side: top;
  align: right;
}
table { 
  border-collapse: collapse;
  border-spacing: 0px; 
}
table, th, td { 
  border: 1px solid black; 
}

仕様書

ブラウザーの互換性

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• 他の表関連 HTML 要素: <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
• <caption> 要素の align 属性 の代替となる CSS プロパティ:
  • text-align, caption-side