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

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

<caption> は HTML の要素で、表のキャプション（またはタイトル）を指定し、表のアクセシブル名またはアクセシブル説明を提供します。

試してみましょう

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tbody>
    <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>
  </tbody>
</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",
    sans-serif;
  text-shadow:
    1px 1px 1px white,
    2px 2px 1px black;
}

.skeletor {
  font:
    1.7rem "rapscallion",
    fantasy;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 white,
    0 0 9px black;
}

属性

この要素にはグローバル属性があります。

非推奨の属性

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

align

キャプションを表のどちら側に表示するかを指定します。使用可能な列挙値は、left、top、right、bottom です。この属性は非推奨となっているため、代わりに CSS の caption-side および text-align プロパティを使用してください。

使用上の注意

<caption> 要素は存在する場合、親である <table> 要素の最初の子とする必要があります。
<table> 要素が <figure> 要素内に含まれており、その図の唯一のコンテンツである場合は、要素の唯一の子孫である場合は、<figure> の <figcaption> 要素を <caption> の代わりに使用してください。
表に background-color を適用しても、キャプションには適用されません。両方の背景を同じ色にしたい場合は、background-color を <caption> 要素にも追加してください。

例

一般的な標準や最善の手法を紹介する完全な表の例については、<table> をご覧ください。

キャプション付きの表

この例では、表示されているデータを説明するキャプションを備えた基本的な表を示しています。

このような「タイトル」は、ページをすばやく目を通すユーザーにとって役立ちます。特に視覚障碍のあるユーザーにとっては有益であり、表の内容が何であるかを知るためにスクリーンリーダーで多くのセルのコンテンツを読み上げてもらう必要がなく、表の関連性をすばやく判断できるようになります。

HTML

<caption> 要素が <table> の最初の子要素として使用され、表のデータを説明するタイトルのようなテキストコンテンツがつけられています。<caption> の後、<tr>、<th>、<td> 要素を使用して、3 行（最初の行はヘッダー行）と 2 列が作成されます。

html
<table>
  <caption>
    ユーザーのログインメールアドレス
  </caption>
  <thead>
    <tr>
      <th>ログイン名</th>
      <th>メールアドレス</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>user1</td>
      <td>user1@example.com</td>
    </tr>
    <tr>
      <td>user2</td>
      <td>user2@example.com</td>
    </tr>
  </tbody>
</table>

CSS

基本的な CSS を使用し、<caption> の位置を揃え、強調表示しています。

css
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 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;
}