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

尚、IE7等古いブラウザではcaption-sideは利用出来ません。
又、確認した範囲では左右に表示出来るのはFireFoxだけで、InternetExplorerやGoogle Chromeは上下だけ表示出来ました。
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プロパティ一覧」に戻る
★上ページに含まれるプロパティ