FF Page テーブルを組む


F&Fのトップページはテーブルを多用して組まれている。
現時点でならCSSを使うのが普通だが、これだとCSSを理解しないブラウザではレイアウトが崩れる。
CSSを正しく理解しないブラウザなどあるのかと言われそうだが、一部ケータイのブラウザはCSSを正しく理解出来ない。

テーブルにしても、枠を細くするために二重にテーブルを書いているのだが、これも単独テーブルでも実現は出来る。
実現は出来るのだがブラウザによって見え方が異なってしまう。

とは言っても今のブラウザならたぶん大丈夫ではないかとも思うので実験してみよう。
まずは普通にテーブルを書いてみる。
枠の太さは最小である"1"にする。
 テーブル  border=1とした場合


枠を太くした場合
 テーブル  border=1とした場合


これをIEで見るとこのようになる。

Chromeで見るとこうなる。

FireFoxはIEに近いが色合い的にはIEとChromeの中間くらいだろうか。
次に枠の太さを0にして、バックの色を透過させる方法で枠を書いてみる。
 テーブル  border=0とした場合


おそらくIEでは枠は細く見えると思うが、古いNetScape系ではページのバックの色が透過しているだけで枠が見えない。


そこで二重テーブル化する。
まずは枠の色でテーブルを書いておき、そのテーブルの中に上下左右1ドットずつ小さなテーブルを書くのだ。
これによってバックのテーブルと前面のテーブルの差の大きさ部分が枠となって見えることになる。
 テーブル  border=0とした場合


しかしこれでは真ん中のラインが見えない。
そこでバックのテーブルの中のテーブルを1つではなく2つに分けて隙間を作る。
 テーブル
 border=0とした場合


こうした出来るだけブラウザによらず一定に見えるようにF&Fのトップページは作っている。
左側の箱を古いNetscapeで見るとこうなる。

しかしgoogle検索の所は手抜きをしているのでこうなる。
というかgoogleのサンプルのままなので。