caption-side

Home>CSS>プロパティリファレンス>caption-side

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

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>&nbsp;</td></tr><tr><td>&nbsp;</td></tr>
</table>
<table>
<caption style="caption-side:left">キャプション</caption>
<tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr>
</table>
<table>
<caption style="caption-side:right">キャプション</caption>
<tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr>
</table>

キャプション
 
 
キャプション
 
 
キャプション
 
 

一番上のテーブルのキャプションは下に、真ん中のテーブルのキャプションは左に、下のテーブルのキャプションは右に表示されることが期待されますが、InternetExplorerなどでは指示通りには表示されません。

関連リンク

よく読まれている記事

UpDate:2010-7-23