caption-side

Updated / Published

caption-sideプロパティは表組に付けるキャプション(表題)の表示位置を指定します。

初期値
top
適用対象
表のキャプション要素caption要素
継承
する
メディア
visual

caption-sideプロパティの値

caption-sideプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

top
キャプションを表組の上に配置(表組の上で水平方向は中央揃え)
bottom
キャプションを表組の下に配置(表組の下で水平方向は中央揃え)
left
キャプションを表組の左に配置
right
キャプションを表組の右に配置

なお、"top"、または "bottom" の値を指定した場合の水平方向の揃え方は text-alignプロパティで指定することが可能です。

caption-sideプロパティの実装状況

IE
◯:IE8よりサポート
Firefox
Opera
Chrome
Safari
iOS
Android

Internet Explorer 6, 7はborder-spacingプロパティに対応しておらず、デフォルトではキャプションは表組の上に配置され、内容は水平方向が中央揃えになっていますが、text-alignプロパティによる水平方向の揃えは反映されます。

サンプル

.calendar caption {
caption-side : bottom ;
text-align : right ;
font-weight : bold ;
font-size : 2em ;
color : navy ;
}

caption-sideプロパティで表組の下にキャプション(表題)を配置し、text-alignプロパティで水平方向を右揃えに指定しています。