テーブル余白とセル間隔の落とし穴

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

　レイアウトを組むうえでもはや欠くことのできない＜table＞タグ。見せ方の要素として、セルの余白となる「cellpadding」や、セル同士の間隔となる「cellspacing」を使いこなせばより表現の幅は広がる。しかし使い方を誤るとタグと実際の見た目とに微妙な整合性の違いがで出てきてしまうのだ。

　たとえば完成の見てくれが、幅500ピクセルで1ピクセルの黒い枠のテーブルをつくろうとする。つくり方としては、まず幅500ピクセルの背景色を黒く塗ったテーブルをつくる。その中にさらに背景色白のテーブルを入れるのだが、「cellspacing」を使う場合、まず幅500ピクセル、「cellspacing」を1ピクセルとしたテーブルを入れ子にし、その＜td＞内の背景を白にすることで完成する。

一方、「cellpadding」を使う場合はというと、大本の幅500ピクセルのテーブルに対してセル内余白1ピクセルを設定。そして入れ子のテーブルは幅498ピクセル、背景色白のテーブルを入れなければならない【1】。これがもし、中に入れるテーブルも幅500ピクセルと設定してしまったら、入れ子の500ピクセル幅に外側の余白が取り付く形となるので、502ピクセルの枠ができてしまう。レイアウトが崩れることにもなるので、気をつけよう。

解説：横山 剛

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