スタイルシートの道具箱～手作りのホームページをスタイルシートで！～

テーブルは、セル情報全てを読み込んだ後でセル幅を計算して表示します。
従ってテーブルの中に重い画像や大量のデータを詰め込むと、
それだけ表示が遅くなってしまいます。

そこでテーブルレイアウトをfixedにすると「最初の一列目」を読み込んだ時点で
（つまりセル数だけ数えて）セル幅を計算するようになります。
結果的に表示を早くする事が出来るのが、このプロパティの特徴です。

注意点は、fixedの場合セル幅は中身に関わらず全て均等にそろえられます。
従ってwidth等で幅を指定しないと綺麗な表示が期待できません。
fixedはwidthとコンビで使うものと覚えておけばよいでしょう。

サンプル

■autoの場合（初期設定）

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="table-layout:auto">....

autoは各セルの幅を計算して、セル内に無駄な余白を作りません。また可能な限りセル内で改行しないよう調整します。

■fixedの場合（width設定無し）

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="table-layout:fixed">....

fixedの場合、テーブル幅は親要素いっぱいに広がり、セル幅は中身に関わらず強制的に均一になります（テーブル幅に対し）。従って見た目が悪くなる事がありますが、表示速度は速くなります。

■fixedの場合（width設定有り）

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="table-layout:fixed"><tr>
<th width="90px">国</th>
<th width="100px">首都</th>
<th width="50px">人口</th>
<th width="70px">面積(k㎡)</th>
</tr>...

fixedとwidthを併用すれば、見た目が綺麗でかつ表示速度も早くできます。

■キャプションの位置

▲ページTOPへ

caption-side:

【Netscapeのみ対応】
テーブルのキャプション（タイトル）の表示位置を設定します。
キャプション自体の設定はhtmlのcaptionタグで設定します。

top
bottom

テーブルの上部に表示（初期設定）
テーブルの下部に表示

サンプル

■topの場合（デフォルト）

日米の首都
国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="caption-side:top">
<caption>日米の首都</caption>
<tr><th>国</th>...

■bottomの場合　※IEは対応してないので表示は変わりません

日米の首都
国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="caption-side:bottom">
<caption>日米の首都</caption>
<tr><th>国</th>...

■枠線の重なり

▲ページTOPへ

border-collapse:

【IEのみ対応】
テーブルやセルの枠線の表示方法を指定します。

通常セルに枠線を設定すると各セル単位で枠線が出来るので
隣り合ったセル（又は外枠）との間は二重線になってしまいます。
こういった枠線の重なりを無くして一つにするのがこのプロパティの機能です。
例えば、単純に直線だけで区切られたテーブルを描きたい場合に大活躍します。

設定値は以下の通り。

collapse
separate

重なる枠線は相殺
枠線は全て表示（初期設定）

サンプル

■separateの場合（初期設定）

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="border-collapse:separate">
<tr><th>国</th>...

これは初期状態。tableタグでborder=1と設定しています。セル間は隆起したような効果になっています。

■collapseの場合

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="border-collapse:collapse">
<tr><th>国</th>...

collapseを設定するとセルの間は一本の線になります。しかしこのままでは非常に見にくい。

■separateの場合（枠線有り）

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="border-collapse:separate">
<tr><th>国</th>...

セルやテーブル全てにボーダーを設定するとこの様な二重線になります。設定はhead情報の中で以下の様にまとめて設定すると楽。

■collapseの場合（枠線有り）

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="border-collapse:collapse">
<tr><th>国</th>...

ボーダーの設定と共にcollapseを設定すると、セルの間は枠線１本のすっきりしたテーブルになります。

■セルの間隔

▲ページTOPへ

border-spacing:●

border-spacing:●　●

【Netscapeのみ対応】
セルとセルの間の間隔を指定します。
タグで言うとtableのcellspacingと全く同じです。

間隔は「数値＋単位」で指定します。
以下の二通りの指定方法があります。
border-spacing:●　：「上下左右」
border-spacing:●　●　：「左右」「上下」の組み合わせ

サンプル

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="border-spacing:5px;">
<tr><th>国</th>...

国	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1 style="border-spacing:5px 10px;">
<tr><th>国</th>...

■空きセルの枠線

▲ページTOPへ

empty-cells:

hide
show

表示しない（初期設定）
表示する

【Netscapeのみ対応】
通常セルの中身が何も無い時は、セルの枠線が表示されません。
これを中身が空でも枠線を表示するように設定します。

サンプル

■hideの場合（初期設定）

	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1>
<tr><th style="empty-cells:hide"></th><th>首都</th>...

■showの場合　※IEは未対応なので変化ありません

	首都	人口	面積(k㎡)
日本	東京	126,926	377,873
アメリカ合衆国	ワシントンＤ．Ｃ．	281,422	9,629,091

<table border=1>
<tr><th style="empty-cells:show"></th><th>首都</th>...

▲ページTOPへ

■レイアウト

table-layout:

サンプル

■キャプションの位置

caption-side:

サンプル

■枠線の重なり

border-collapse:

サンプル

■セルの間隔

border-spacing:●

border-spacing:● ●

サンプル

■空きセルの枠線

empty-cells:

サンプル

border-spacing:●　●