HTML <caption> タグ

定義と使用法

<caption> タグはテーブルのタイトルを定義します。

キャプションタグはtableタグのすぐ後に来なければなりません。各テーブルに対してタイトルを1つだけ定義できます。

ヒント：デフォルトでは、テーブルのタイトルはテーブルの上に中央に配置されますが、CSS属性text-alignとcaption-sideを使用してタイトルの配置と対齐を変更できます。

参照もしくは：

HTML DOM リファレンスマニュアル：キャプションオブジェクト

例

例1

タイトル付きテーブル：

<table>
  <caption>月次預金</caption>
  <tr>
    <th>月</th>
    <th>預金</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3000</td>
  </tr>
</table>

自分で試してみる

例2

位置テーブルのタイトル（CSSを使用）：

<table>
  <caption style="text-align:right">私の預金</caption>
  <tr>
    <th>月</th>
    <th>預金</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3000</td>
  </tr>
</table>
<br>
<table>
  <caption style="caption-side:bottom">私の預金</caption>
  <tr>
    <th>月</th>
    <th>預金</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3000</td>
  </tr>
</table>

自分で試してみる

グローバル属性

<caption> タグは以下のイベント属性をサポートしています HTML でのグローバル属性。

イベント属性

<caption> タグは以下のイベント属性をサポートしています HTML でのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザでは以下のデフォルト値を使用して表示されます <caption> 要素：

caption {
  display: table-caption;
  text-align: center;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート