★このページでは、CSSの基本的な仕様について解説しています。

テーブルに関する設定は、IE6.0以前、Netscape6.2以前など主要なブラウザで未対応の場合が多いようです。

各プロパティの対応状況については、それぞれの項目を参照して下さい。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL10. テーブルに関する設定　その１ ★ 表示方法とキャプションの位置

　

１．表示方法 （IE以外のブラウザでは対応していないものがあります。）

table-layout: <値>;

テーブルは通常、そのテーブルに含まれるデータを全部読み込んでから表示が始まりますが、これを最初の行の読込みが完了した時点で各セルのサイズを計算して表示を始めるように設定することが出来ます。これにより、ページの表示速度を速められますが、サイズ指定のないセル幅は、全体に対して均等になりますので、内容によっては表示が著しく違ってくる場合があり、注意が必要です。このプロパティに指定できる<値>は、以下の２つです。

auto ...テーブル全体を読み込んでから、設定に応じてセル幅を計算して表示する。（デフォルト）

fixed ... 最初の行を読み込んだ時点でセル幅を計算して表示する。幅が指定されていないセルは、自動的に均等になる。

　

※それぞれの実例を「auto(通常と同じ)」/「fixed1(セル幅指定なし)」「fixed2（セル幅指定あり）」で、ご覧になれます。ある程度テーブルが大きい方が違いが分かりやすいと思いますので、サンプルにはMagazine Workshop トップページの一部を使っています。ダウンロードに多少お時間がかかりますので、悪しからずご了承下さい。

　

２．キャプションの位置 （IE6.0やNetscape4.7以前など、対応していないブラウザやバージョンがあります。）

caption-side: <値>;

表にタイトルを付けた時に、表の上、下どちらに表示されるかを指定できます。このプロパティに指定できる<値>は、以下の２つです。

top ...テーブルの上に表示。（デフォルト）

　

bottom ... テーブルの下に表示。

(下のサンプルは画像です。IE6.0は対応していないので、実際には「bottom」を指定しても無視されて上に表示されます。)

　

※CSS外部ファイルとHTMLのサンプル部分は以下のように書かれています。

body { background-color: #9b9bff;
color: #036; 
}

caption { caption-side: top (bottom); 
padding: 15px; 
font-size: 10pt; 
font-weight: bold;
}

table { width: 200px;
height: 120px; 
border: 3px outset; 
}

td { border: 1px solid #066; 
text-align: center; 
font-weight: bold; 
font-size: 20pt; 
} 

　

サンプル部分のHTML記述

<table> 
<caption>セルの入力順序</caption> 
<tr> 
   <td> 1.</td> 
   <td> 2.</td> 
   <td> 3. </td> 
</tr> 
<tr> 
   <td> 4. </td> 
   <td> 5. </td> 
   <td> 6. </td> 
</tr> 
</table> 

　

　

初級篇2.VOL9. 配置に関する設定・その4 <<

>> 初級篇2.VOL10. テーブルに関する設定・その2

　

　

2007.2.15.+2.23.-2.24.