caption-side
Updated / Published
caption-sideプロパティは表組に付けるキャプション（表題）の表示位置を指定します。
- 値
topbottomleftrightinherit
- 初期値
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プロパティで水平方向を右揃えに指定しています。