caption要素とは

<caption>要素は、tableテーブル captionキャプションの略で、表のタイトルを表す要素です。 この<caption>要素は、<table>要素内の先頭に1つだけ配置することが可能です。

意味・役割
(テーブル)のタイトルを表す要素
利用できるバージョン(HTML4.01以降)
全てのバージョン
コンテンツ・カテゴリ
なし
(HTML5より前:なし)
コンテンツ・モデル(梱包できる要素)
フロー・コンテンツ
ただし、子孫に<table>要素は配置できない。
(HTML5より前:インライン要素のみ)
この要素を配置できる親要素
<table>要素。
<table>要素内の最初の子要素として配置。)

caption要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

align属性 XHTML1.1で廃止

alignアライン属性は、キャプションの表示位置を指定する属性です。この属性を使用しない時は、"top" となり表の上部に表示されます。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSのcaption-side プロパティや、text-align プロパティで行うようにしましょう。

<caption align="キャプションの表示位置">
属性値
  • "top": 表の上部
  • "bottom": 表の下部
  • "left": 表の左側 (一部のブラウザは、表の上部でテキストを左揃えで表示)
  • "right": 表の右側 (一部のブラウザは、表の上部でテキストを右揃えで表示)
利用できるバージョン(HTML4.01以降)
HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
使用例
<caption align="bottom">

caption要素のサンプル

caption要素を使った表の例
<table border="1">
  <caption>商品一覧表<caption>
  <thead>
    <tr>
      <th>商品コード</th>
      <th>商品名</th>
      <th>数量</th>
      <th>金額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>D001</td>
      <td>製品A</td>
      <td>2</td>
      <td>5,000</td>
    </tr>
    <tr>
      <td>D002</td>
      <td>製品B</td>
      <td>1</td>
      <td>8,000</td>
    </tr>
    <tr>
      <td>D003</td>
      <td>製品C</td>
      <td>2</td>
      <td>10,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="rowgroup">合計</th>
      <td>38,000</td>
    </tr>
  <tfoot>
</table>
ブラウザでの表示例

RERUN

caption要素の注意点

もし、<table>要素が、<figure>要素内の唯一のコンテンツの場合は、表見出しに<caption>要素ではなく、 <figcaption>要素を使いましょう。

figure要素内の表の例
<figure>
  <figcaption>情報通信機器別インターネットの利用状況</figcaption>
  <table border="1">
    <tr>
      <th scope="row">自宅のパソコン</th>
      <td>53.5%</td>
    </tr>
    <tr>
      <th scope="row">自宅以外のパソコン</th>
      <td>21.8%</td>
    </tr>
    <tr>
      <th scope="row">従来型の携帯電話</th>
      <td>17.8%</td>
    </tr>
    <tr>
      <th scope="row">スマートフォン</th>
      <td>47.1%</td>
    </tr>
    <tr>
      <th scope="row">タブレット端末</th>
      <td>14.8%</td>
    </tr>
    <tr>
      <th scope="row">インターネット利用率</th>
      <td>82.8%</td>
    </tr>
  <table>
</figure>
ブラウザでの表示例

RERUN

仕様

HTML5.1
4.9.2. The caption element
HTML5
4.9.2 The caption element
HTML4.01
11.2.2 Table Captions: The CAPTION element

関連する要素