<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">He-Man</th>    <th scope="col">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 要素を基準とした相対的な位置を指定します。以下の値が指定できます。

left: キャプションを表の左側に表示します。
top: キャプションを表の上側に表示します。
right: キャプションを表の右側に表示します。
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>

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

技術的概要

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