caption-side
Home>CSS>プロパティリファレンス>caption-side
caption-sideプロパティの役割
caption-sideプロパティは、テーブルにキャプションを付ける際に、キャプションの位置を指定します。
caption-sideプロパティに設定できる値
bottom | テーブルの下にキャプションを表示。 |
left | テーブルの左にキャプションを表示。 |
right | テーブルの右にキャプションを表示。 |
top | テーブルの上にキャプションを表示。初期値。 |
各ブラウザの実装状況
caption-sideプロパティを完全には実装していないブラウザもあるため、実際には、bottomとtop以外は使わない方がいいでしょう。
Internet Explorer8 |
Fire Fox3 |
Google Chrome5 |
Opera10 | |
bottom | ○ | ○ | ○ | ○ |
left | × | ○ | × | × |
right | × | ○ | × | × |
top | ○ | ○ | ○ | ○ |
caption-sideプロパティの使い方
<table>
<caption style="caption-side:bottom">キャプション</caption>
<tr><td> </td></tr><tr><td> </td></tr>
</table>
<table>
<caption style="caption-side:left">キャプション</caption>
<tr><td> </td></tr><tr><td> </td></tr>
</table>
<table>
<caption style="caption-side:right">キャプション</caption>
<tr><td> </td></tr><tr><td> </td></tr>
</table>
一番上のテーブルのキャプションは下に、真ん中のテーブルのキャプションは左に、下のテーブルのキャプションは右に表示されることが期待されますが、InternetExplorerなどでは指示通りには表示されません。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-7-23