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

caption-sideプロパティを使うと表(テーブル)のタイトルの表示位置を表の下等に変更出来ます。

説明

 表(テーブル)のタイトルはデフォルトでは表の上に表示されますが、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>

説明用
題1 題2
データ1 データ2
データ3 データ4

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

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

説明用
題1 題2
データ1 データ2
データ3 データ4

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

説明用
題1 題2
データ1 データ2
データ3 データ4
説明用
題1 題2
データ1 データ2
データ3 データ4

関連ページ

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)