<caption>テーブルにキャプションをつける

<caption>タグは、テーブル(表)のタイトルや説明といったキャプションを表します。

<caption>では、テーブルの内容を分かりやすく説明できるようなキャプションを付け、table要素の最初の子要素として配置します。 一般的には<caption>の内容はテーブルの上部に表示されますが、CSSのcaption-sideプロパティなどを使用すると表示位置を変更することができます。

またcaption要素内には、従来でいうブロックレベル要素などを配置することができます。 例えばテキスト関連要素として、p要素strong要素なども配置することが可能です。

なおfigure要素内にtable要素のみを入れる場合は、caption要素ではなく、figcaption要素を使用します。 これはfigcaption要素がキャプションとしての役割を果たすためです。

HTML5での変更点

HTML5のcaption要素では、align属性が廃止されました。 またpタグなど、以前でいうブロックレベル要素を含める事が可能になりました。

書式

  • <caption 属性="値">~</caption> ……… テーブル(表)にキャプションを付ける

使用した時の例

<table border="1">
<caption>表のキャプション</caption>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>内容1-1</td>
    <td>内容2-1</td>
    <td>内容3-1</td>
  </tr>
  <tr>
    <td>内容1-2</td>
    <td>内容2-2</td>
    <td>内容3-2</td>
  </tr>
</table>

<table border="1">
<caption>
<p>登録会員のデータです。入力してもらった内容を記載しています</p>
</caption>
  <tr>
    <th>氏名</th>
    <th>住所</th>
    <th>電話番号</th>
  </tr>
  <tr>
    <td>浜田</td>
    <td>東京都新宿区</td>
    <td>000-555-2654</td>
  </tr>
  <tr>
    <td>中之島</td>
    <td>北海道札幌</td>
    <td>256-444-9854</td>
  </tr>
</table>

ブラウザ上の表示例

表のキャプション
見出し1 見出し2 見出し3
内容1-1 内容2-1 内容3-1
内容1-2 内容2-2 内容3-2

登録会員のデータです。入力してもらった内容を記載しています

氏名 住所 電話番号
浜田 東京都新宿区 000-555-2654
中之島 北海道札幌 256-444-9854

対応ブラウザなどのデータ

形式 <caption>~</caption> カテゴリ なし
親要素 table 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~