<caption>: 表キャプション要素
試してみましょう
HTML の <caption>
要素は、表のキャプション (またはタイトル) を指定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリ | なし |
---|---|
許可されている内容 | フローコンテンツ |
タグの省略 | 要素の直後に ASCII 空白文字やコメントが続かない場合、終了タグは省略可能です。 |
許可されている親要素 | <table> 要素。table 要素の最初の子要素としてのみ配置可能。 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLTableCaptionElement |
属性
この要素は グローバル属性 を持ちます。
非推奨の属性
以下の属性は非推奨であり、使用するべきではありません。以下に記述しているのは、既存コードを更新する際の参考や、歴史的な関心としてのためのみです。
align
Deprecated- この列挙属性は caption 要素の、自身の指し示す table 要素を基準とした相対的な位置を指定します。以下の値を指定できます。
left
- キャプションを表の左側に表示します。
top
- キャプションを表の上側に表示します。
right
- キャプションを表の右側に表示します。
bottom
- キャプションを表の下側に表示します。
使用上の注意: この属性は非推奨ですので使用しないでください。<caption>
要素にスタイルを適用するには、 CSS プロパティのcaption-side
およびtext-align
を使用してください。
使用上の注意
<caption>
要素は親である <table>
要素の最初の子としてください。
<table>
要素が <figure>
要素の唯一の子孫である場合は、 <figcaption>
要素を <caption>
の代わりに使用してください。
例
このシンプルな例は、キャプションを含む票を表します。
<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>
table {background: red;}
ではキャプションは変更されません。そのためには display: block
が必要です。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <caption> の定義 |
現行の標準 | |
HTML5 <caption> の定義 |
勧告 | |
HTML 4.01 Specification <caption> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<caption>
要素の align 属性 の代替となる CSS プロパティ: