表

caption-side

caption-side は、表の見出し(caption 要素)を表の上に置くか、下に置くかを指定します。

構文

top | bottom

プレビュー

果物の数
個数
りんご3
みかん5
プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  caption-side: bottom;
}

コントロール

caption-sidebottom
caption-side
果物の数
個数
りんご3
みかん5

解説

値の意味

  • top:見出しを表の上に置きます。初期値です。
  • bottom:見出しを表の下に置きます。

縦書きの表では、top は表のブロックの始まり、bottom は終わりの側を指します。writing-mode: vertical-rl の表なら、top で右、bottom で左に置かれます。

どこに書くか

継承するプロパティなので、caption 要素に書いても、table 要素やそれを囲む要素に書いても効きます。

このページのプレビューでは、箱の中の表に「果物の数」という見出しを付け、箱に書いた値を受け取らせています。

コメント