caption-side/表タイトル表示位置

説明

　表(テーブル)のタイトルはデフォルトでは表の上に表示されますが、caption-sideを使うと右、下、左等に表示させる事が出来ます。

　尚、IE7等古いブラウザではcaption-sideは利用出来ません。

　又、確認した範囲では左右に表示出来るのはFireFoxだけで、InternetExplorerやGoogle Chromeは上下だけ表示出来ました。

構文

　caption-sideプロパティの構文は以下の通りです。

capsion-side: 表示位置;

　表示位置はtopがデフォルトで上、rightで右、bottomで下、leftで左を指定した事になります。

利用例

　caption-sideの利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

table {
caption-side: left;
}

<table border=1>
<caption>説明用</caption> <tr>
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>

　表の左にタイトルが表示されています。

　デフォルトでは以下のように表示されます。

　以下は表示例でright、bottomの順です。

関連ページ

・ホームページ作成「表の挿入」

　表の表示方法だけでなく、罫線の表示、罫線を1重線にする方法、罫線の太さと色を変える方法、幅の指定、センタリング、の背景と文字の色を変える方法、セルの結合等について説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る