caption-sideプロパティ

TOPページに戻る > CSS

caption-sideプロパティ

table要素のcaption（題名）の表示場所を選択できます
値にtopを指定すると、表の上に題名が表示になります
値にbottomを指定すると、表の下に題名が表示されます
初期値はtopです
※IE6、IE7が未対応、IE8から対応しています

使い方（書式）

セレクタ { caption-side: 値; }                                    

caption-sideプロパティ

対応ブラウザ
適用できる要素	caption要素　displayプロパティの値にtable-captionを指定した要素
子要素へのスタイルの継承	する

プロパティの値	説明
top	table要素の上に題名を表示
bottom	table要素の下に題名を表示

実際の指定方法

.caption { caption-side: top; }   /* table要素の上にcaptionを表示 */

.caption2 { caption-side: bottom; }  /* table要素の下にcaptionを表示 */

html部分

<table>
<caption class="caption">caption-side: top;</caption>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>


<table>
<caption class="caption2">caption-side: bottom;</caption>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

実際の表示　値がtop

caption-side: top;

セル	セル
セル	セル

実際の表示　値がbottom

caption-side: bottom;

セル	セル
セル	セル