caption-side

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

解説

captionタグで指定したタイトルの位置を、テーブルの上部もしくは下部に指定できます。

以前はleft（左側）、right（右側）も指定できましたが、CSS3では非標準となっています。

構文

構文は以下になります。

値

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

太字の値は初期値です。

サンプル

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

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>

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

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>

備考

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

Tweet