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

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

技術的概要

コンテンツカテゴリー許可されている内容タグの省略許可されている親要素暗黙の ARIA ロール許可されている ARIA ロール DOM インターフェイス

なし

フローコンテンツ

要素の直後に ASCII 空白文字やコメントが続かない場合、終了タグは省略可能です。

<table> 要素で、その最初の子要素としてのみ配置可能。

caption

許可されている role なし

HTMLTableCaptionElement

仕様書

Specification

HTML
# the-caption-element

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026年2月19日 by MDN contributors.

View this page on GitHub • Report a problem with this content