CSS3スタイル虎の巻

caption-side

caption-sideは、テーブルの見出しの位置を指定するスタイルです。

解説

見出しの位置をテーブルの上部もしくは下部に指定できます。
以前はleft(左側)、right(右側)も指定できましたが、CSS3では非標準となっています。

構文

構文は以下になります。

caption-side: 値;

caption-sideには以下の値が指定できます。

説明
topテーブルの上に表示する(初期値)
(例)caption-side:top;
bottomテーブルの下に表示する
(例)caption-side:bottom;

太字の値は初期値です。

サンプル

テーブルの見出しを表の下に表示する


caption{
  caption-side:bottom;
}

<table>
  <caption>【商品一覧】</caption>
  <tr><th>No</th><th>商品</th><th>単価</th></tr>
  <tr><td>1</td><td>みかん</td><td>50円</td></tr>
  <tr><td>2</td><td>りんご</td><td>100円</td></tr>
  <tr><td>3</td><td>ぶどう</td><td>300円</td></tr>
</table>
【商品一覧】
No商品単価
1みかん50円
2りんご100円
3ぶどう300円

テーブルの見出しを表の上に表示する(デフォルト)


caption{
  caption-side:top;
}

<table>
  <caption>【商品一覧】</caption>
  <tr><th>No</th><th>商品</th><th>単価</th></tr>
  <tr><td>1</td><td>みかん</td><td>50円</td></tr>
  <tr><td>2</td><td>りんご</td><td>100円</td></tr>
  <tr><td>3</td><td>ぶどう</td><td>300円</td></tr>
</table>
【商品一覧】
No商品単価
1みかん50円
2りんご100円
3ぶどう300円

備考

  • 表の上に表示させたい場合は、caption-sideを指定しなくてもOKです。