トップページ > スタイルシートリファレンス > caption-side

★スタイルシートリファレンス

caption-side …… テーブル(表)のキャプションの位置を指定する
Internet Explorer8Internet Explorer9 Netscape6Netscape7Netscape8 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

caption-sideプロパティは、テーブル(表)のキャプションの位置を指定する際に使用します。 指定できるキャプションの位置は、テーブルの上下左右(top、bottom、left、right)です。

■値

top
キャプションをテーブル(表)の上に表示します。これが初期値です。
bottom
キャプションをテーブル(表)の下に表示します。
left
キャプションをテーブル(表)の左に表示します。
right
キャプションをテーブル(表)の右に表示します。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

caption {
color: #006633;
caption-side: left;
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<table border="1">
<caption>スタンリー・キューブリックの作品</caption>
<tr><td>1953年</td><td>恐怖と欲望</td></tr>
<tr><td>1956年</td><td>現金に体を張れ</td></tr>
<tr><td>1957年</td><td>突撃</td></tr>
<tr><td>1960年</td><td>スパルタカス</td></tr>
<tr><td>1962年</td><td>ロリータ</td></tr>
<tr><td>1964年</td><td>博士の異常な愛情</td></tr>
<tr><td>1968年</td><td>2001年宇宙の旅</td></tr>
<tr><td>1971年</td><td>時計じかけのオレンジ</td></tr>
<tr><td>1975年</td><td>バリー・リンドン</td></tr>
<tr><td>1980年</td><td>シャイニング</td></tr>
<tr><td>1987年</td><td>フルメタル・ジャケット</td></tr>
<tr><td>1999年</td><td>アイズ・ワイド・シャット</td></tr>
</table>
</body>
</html>
↓↓↓

ブラウザ上の表示

スタンリー・キューブリックの作品
1953年恐怖と欲望
1956年現金に体を張れ
1957年突撃
1960年スパルタカス
1962年ロリータ
1964年博士の異常な愛情
1968年2001年宇宙の旅
1971年時計じかけのオレンジ
1975年バリー・リンドン
1980年シャイニング
1987年フルメタル・ジャケット
1999年アイズ・ワイド・シャット

■関連項目

table-layout …… テーブル(表)の表示方法を指定する
caption-side …… テーブル(表)のキャプションの位置を指定する
border-collapse …… セルのボーダーの表示の仕方を指定する
border-spacing …… セルのボーダーの間隔を指定する
empty-cells …… 空白セルのボーダーの表示・非表示を指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ