テーブル100%の落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　縦幅を揃えた2列の表を枠線入りでつくりたい場合、3列のテーブルを作成しその中に入れ子のテーブルをつくっていく。3列でつくった左右の＜td＞タグに色をつけ、その中にセル間隔1、縦100%のテーブルを配置し、その＜td＞を白くして表に見せる。

　しかしこのつくり方だと実は失敗である。このつくり方で片方の画像や情報が多くなったり縦幅が長くなったりすると、Macintoshでは正常に見えるのに【1】、Windowsでは100%設定が効かない【2】。サンプル画像は左にだけ縦300ピクセルの透明GIFを入れている。右は文字だけである。

　これを解決する方法としては、先ほどのつくり方だと3列にしたテーブルの左右に枠線用の色をつけたが、そこには色を入れずに、いったん左右の＜td＞と横幅同じで縦100%の大きさのテーブルを入れる。そのテーブルに枠線となる背景色を設定し、さらにセル間隔1、縦100%のテーブルを入れ、そのテーブルの＜td＞を白にする。そして大本の3列のテーブルに縦幅を情報量になるだけ近いサイズを入れておく。

　最初のつくり方で大本の3列のテーブルに縦幅を設定するのもいいが、微妙に1ピクセル下がったり太かったりすることがあるので、2番目のつくり方をお勧めする。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）