ウェブランサー

caption-side - テーブル(表)のキャプションの位置を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 caption要素
継承 する

caption-sideプロパティは、テーブル(表)のキャプションの位置を指定する際に使用します。

caption-sideに与えられる値

caption-side: top;
キャプションをテーブル(表)の上に表示します。これが初期値です。
caption-side: right;
キャプションをテーブル(表)の右に表示します。
caption-side: bottom;
キャプションをテーブル(表)の下に表示します。
caption-side: left;
キャプションをテーブル(表)の左に表示します。

caption-sideの使用サンプル

CSS
.caption_sample01 {
 color: #0066FF;
 font-weight: bold;
 caption-side: top;
}
.caption_sample02 {
 color: #0066FF;
 font-weight: bold;
 caption-side: bottom;
}
XHTML
<table>
<caption>キャプションサンプル01</caption>
<tr>
<td>01</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>02</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>03</td><td>サンプル</td><td>サンプル</td></tr>
</table>

<table>
<caption>キャプションサンプル02</caption>
<tr>
<td>01</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>02</td><td>サンプル</td><td>サンプル</td></tr>
<tr>
<td>03</td><td>サンプル</td><td>サンプル</td></tr>
</table>
表示確認
キャプションサンプル01
01サンプルサンプル
02サンプルサンプル
03サンプルサンプル
キャプションサンプル02
01サンプルサンプル
02サンプルサンプル
03サンプルサンプル

caption-sideに関連するCSSプロパティ

テーブル(table)関連
border-collapse テーブルセルのボーダーの表示の仕方を指定する
border-spacing テーブルセルのボーダーの間隔を指定する
caption-side テーブル(表)のキャプションの位置を指定する
empty-cells 空白セルのボーダーの表示・非表示を指定する
table-layout テーブルを描画する際のレンダリングアルゴリズムを指定する