caption-side 【キャプションの位置を指定する】

[Fx1] [Fx2] [Ns6] [Ns7]

caption-sideプロパティは、テーブル(表)のキャプションの位置を指定する際に使用します。

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

right
キャプションをテーブル(表)の右に表示します。

bottom
キャプションをテーブル(表)の下に表示します。

left
キャプションをテーブル(表)の左に表示します。

caption-sideの使用例

CSSファイル

caption {
 color: #0066ff;
 font-weight: bold;
 caption-side: left;
}
.tbex {
 border: 1px solid #ff6600;
 margin: 10px;
}
.tbex td {
 text-align: left;
 border: 1px solid #ffcc00;
 padding: 3px 0px 3px 2px;
}

HTMLソース

<table class="tbex">
<caption>WEB制作便利ツール</caption>
<tr>
<td>写真加工、画像編集、バナー作製 </td><td>Adobe Photoshopシリーズ </td></tr>
<tr>
<td>サイトロゴ、キャラクター、イラスト </td><td>AdobeIllustratorシリーズ </td></tr>
<tr>
<td>アニメーション、ゲーム </td><td>Macromedia Flashシリーズ </td></tr>
<tr>
<td>ファイルのアップロード </td><td>FFFTP </td></tr>
<tr>
<td>テキストエディタ </td><td>TeraPad　or　秀丸 </td></tr>
</table>

表示すると

WEB制作便利ツール
写真加工、画像編集、バナー作製 Adobe Photoshopシリーズ 
サイトロゴ、キャラクター、イラスト AdobeIllustratorシリーズ 
アニメーション、ゲーム Macromedia Flashシリーズ 
ファイルのアップロード FFFTP 
テキストエディタ TeraPad　or　秀丸 

テーブル(表)関連項目

table-layout テーブル(表)の表示方法を指定する 
caption-side テーブル(表)のキャプションの位置を指定する 
border-collapse セルのボーダーの表示の仕方を指定する 
border-spacing セルのボーダーの間隔を指定する 
empty-cells 空白セルのボーダーの表示・非表示を指定する 

戻る

TOP