<caption>: 表キャプション要素
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
<caption> は HTML の要素で、表のキャプション（またはタイトル）を指定します。
試してみましょう
<table> <caption> He-Man and Skeletor facts </caption> <tr> <td></td> <th scope="col" class="heman">He-Man</th> <th scope="col" class="skeletor">Skeletor</th> </tr> <tr> <th scope="row">Role</th> <td>Hero</td> <td>Villain</td> </tr> <tr> <th scope="row">Weapon</th> <td>Power Sword</td> <td>Havoc Staff</td> </tr> <tr> <th scope="row">Dark secret</th> <td>Expert florist</td> <td>Cries at romcoms</td> </tr> </table> caption { caption-side: bottom; padding: 10px; font-weight: bold; } table { border-collapse: collapse; border: 2px solid rgb(140 140 140); font-family: sans-serif; font-size: 0.8rem; letter-spacing: 1px; } th, td { border: 1px solid rgb(160 160 160); padding: 8px 10px; } th { background-color: rgb(230 230 230); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250 250 250); } tr:nth-child(odd) td { background-color: rgb(240 240 240); } .heman { font: 1.4rem molot; text-shadow: 1px 1px 1px #fff, 2px 2px 1px #000; } .skeletor { font: 1.7rem rapscallion; letter-spacing: 3px; text-shadow: 1px 1px 0 #fff, 0 0 9px #000; } 属性
この要素にはグローバル属性があります。
非推奨の属性
以下の属性は非推奨であり、使用するべきではありません。以下に記述しているのは、既存コードを更新する際の参考や、歴史的な関心としてのためのみです。
align非推奨;-
この列挙型属性は caption 要素の、自身の指し示す table 要素を基準とした相対的な位置を指定します。以下の値が指定できます。
警告: この属性は非推奨ですので使用しないでください。
<caption>要素にスタイルを適用するには、CSS プロパティのcaption-sideおよびtext-alignを使用してください。
使用上の注意
<caption> 要素は親である <table> 要素の最初の子とする必要があります。
<caption> を持つ <table> 要素が <figure> 要素の唯一の子孫である場合は、 <figcaption> 要素を <caption> の代わりに使用してください。
表の background-color はキャプションを含みません。両方の背景を同じ色にしたい場合は、background-color を <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> 技術的概要
| コンテンツカテゴリー | なし |
|---|---|
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 要素の直後に ASCII 空白文字やコメントが続かない場合、終了タグは省略可能です。 |
| 許可されている親要素 | <table> 要素で、その最初の子要素としてのみ配置可能。 |
| 暗黙の ARIA ロール | caption |
| 許可されている ARIA ロール | 許可されている role なし |
| DOM インターフェイス | HTMLTableCaptionElement |
仕様書
| Specification |
|---|
| HTML # the-caption-element |
ブラウザーの互換性
Loading…
関連情報
<caption>要素の align 属性 の代替となる CSS プロパティ: