<CAPTION>テーブルの見出しを表示

テーブル(表)のキャプション(タイトル)は<CAPTION>タグで指定する事ができます。

<CAPTION>~</CAPTION>で囲ったテキストは、テーブル(表)のキャプション(タイトル)として表示されますが、利用する場合は必ず<TABLE>タグの直後に配置する必要がありますので注意して下さい。

※<CAPTION>タグは1つだけ配置できます。

またalign属性を指定するとキャプションの表示位置をテーブルの上(top)、または下(bottom)にする事ができます。 いずれもセンタリングして表示されますが、align属性を指定しない場合は、上に表示されます。

※代わりにvalign属性を利用した場合は、Internet Explorerでは反映されますが、Netscape Navigatorでは反映されません。

ただしHTML4.01ではalign属性は非推奨となっており、HTML5では廃止されています。 ですので可能であればスタイルシートを使用する事をオススメします。

スタイルシートを用いる場合は<caption style="caption-side:bottom;">などと記述します。

使用した時の例

<table border="2">
<caption>日本の名車リスト</caption>
  <tr>
     <th>名前</th>
     <th>メーカー</th>
  </tr>
  <tr>
     <td>ランサーエボリューション</td>
     <td>三菱</td>
  </tr>
  <tr>
     <td>RX-7(FD3S)</td>
     <td>マツダ</td>
  </tr>
</table>

<table border="2">
<caption align="bottom">日本の名車リスト</caption>
  <tr>
     <th>名前</th>
     <th>メーカー</th>
  </tr>
  <tr>
     <td>ランサーエボリューション</td>
     <td>三菱</td>
  </tr>
  <tr>
     <td>RX-7(FD3S)</td>
     <td>マツダ</td>
  </tr>
</table>

ブラウザ上の表示例

日本の名車リスト
名前 メーカー
ランサーエボリューション 三菱
RX-7(FD3S) マツダ
日本の名車リスト
名前 メーカー
ランサーエボリューション 三菱
RX-7(FD3S) マツダ

属性

align="top" キャプションの表示位置を指定
  • top・・・表の上に中央揃え(初期値)
  • bottom・・・表の下に中央揃え
  • left・・・表の左側に表示
  • right・・・表の右側に表示
valign="top" キャプションの表示位置を指定(IEのみ)
  • top・・・表の上(初期値)
  • bottom・・・表の下

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

形式 <caption>~</caption> カテゴリ なし
親要素 table 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align属性は、HTML5では廃止。代わりにスタイルシートのcaption-sideやtext-alignを使いましょう。