表
caption-side
caption-side は、表の見出し(caption 要素)を表の上に置くか、下に置くかを指定します。
構文
top | bottomプレビュー
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
caption-side: bottom;
}コントロール
caption-sidebottom
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
解説
値の意味
top:見出しを表の上に置きます。初期値です。bottom:見出しを表の下に置きます。
縦書きの表では、top は表のブロックの始まり、bottom は終わりの側を指します。writing-mode: vertical-rl の表なら、top で右、bottom で左に置かれます。
どこに書くか
継承するプロパティなので、caption 要素に書いても、table 要素やそれを囲む要素に書いても効きます。
このページのプレビューでは、箱の中の表に「果物の数」という見出しを付け、箱に書いた値を受け取らせています。