キャプション(表題)の表示位置を指定する

caption-side

CSSの書き方

caption-side:値 ;

CSSの詳細情報
プロパティ名 caption-side 読み方 キャプション・サイド
初期値 top 意味 表の表題(キャプション)の位置を指定
top/bottom/left/right
対象 table-caption(表のキャプション)要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 する FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「caption-side」プロパティは表に対する表題(キャプション)の位置を指定するスタイルシートです。

通常、HTMLのtable要素にcaptionも指定している場合、表題は表の最も上に表示されますが、この位置を変えることができます。

「caption-side」プロパティの値は上下左右4方向で指定可能です。

「caption-side:top;」としたときは、初期値なので通常通り表の上に表示されます。

同様に「caption-side:bottom;」は表の下に、「caption-side:left;」は表の左側に、「caption-side:right;」は表の右側にそれぞれ表示されます。

IEは非対応

「caption-side」プロパティはInternetExplorerに非対応です。

CSS/HTMLサンプル

table { width:350px; border:1px solid #666666; background:#f6f6f6;}
td { border:1px solid #666666; padding:2px; }
caption { caption-side:bottom; background:#ffdff9; border:2px solid red; }

表の表題(キャプション)の表示位置を指定 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!