caption-side

CSSプロパティ「caption-side」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

caption-side

テーブルの注釈（caption）の表示位置を指定するプロパティ。

テーブルの注釈（caption）は通常、テーブル上部（top）に表示されるが、caption-sideに値を指定することで、その位置を下（bottom）、左（left）、右（right）に表示させることができる。

値

top captionをテーブル上部に表示。（初期値）
bottom captionをテーブル下部に表示。
left captionをテーブル左部に表示。
right captionをテーブル右部に表示。

使用例

サンプル(A)

[CSSの記述]

.sample { background:#def; caption-side:bottom; }

[HTMLの記述]

<table border="1">
	<caption class="sample">第51回有馬記念 競争結果</caption>
	<tr><th>1着</th><td>ディープインパクト</td><td>武豊</td></tr>
	<tr><th>2着</th><td>ポップロック</td><td>O.ペリエ</td></tr>
	<tr><th>3着</th><td>ダイワメジャー</td><td>安藤勝己</td></tr>
	<tr><th>4着</th><td>ドリームパスポート</td><td>内田博幸</td></tr>
	<tr><th>5着</th><td>メイショウサムソン</td><td>石橋守</td></tr>
</table>

[ブラウザ上の表示]

第51回有馬記念 競争結果
1着ディープインパクト武豊
2着ポップロックO.ペリエ
3着ダイワメジャー安藤勝己
4着ドリームパスポート内田博幸
5着メイショウサムソン石橋守