caption 要素 | HTML要素リファレンス | リファレンス

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

新しいウインドウで表示する