ページをレイアウトしてみよう　その1
テーブルレイアウト

矢野りん／ライター

2006.10.03

　データシートのような表組みをWebぺージに掲載する手段は、HTMLのtableというタグを使うことである。行と列のセルを複数設定すると、ちょうど方眼紙のような体裁が作れることから、画像やテキストをWebページ上の好きな位置に表示させる代替手段に使われることもある。この方法をWebサイト制作用語で「テーブルレイアウト」という。

■テーブルレイアウトの欠点

　多くのサイトオーサリングツールがレイアウトの手段として「レイアウトグリッド」や「レイアウトテーブル」といった名前の機能を搭載している。方眼に見立てて生成したテーブルに素材を放り込むという作業手順は、紙ベースのレイアウト用ツールと操作感覚が非常に似ている。そのためデザイナーには馴染みやすく、学習もしやすい。HTMLだけでレイアウトの工夫が完結するため、サイトオーサリングツールで100%作業が完結させられる点も良いところだ。

　ところがテーブルレイアウトには以下の欠点がある。

1.HTMLの記述が大量かつ複雑になる
2.CSSの長所を生かしにくい
3.情報とスタイルを完全に分離できない
4.正しい文書構造を作りにくい

1.HTMLの記述が大量かつ複雑になる

　素材を入れるボックスが１つだけ必要な場合でも、【図1】のように３つの関連するタグが必要になる。そのため複数のセルから成るレイアウトは必然的にHTMLソースの行数が増えてしまう。

【図1】　文字の周囲にボーダーを出すだけでもこれだけのタグが必要。CSSレイアウトの場合、段落などのブロックレベル要素にボーダーを与えてやるだけで同じことができる

　さらにテーブルレイアウトは通常、レイアウトに使用する範囲を定義する目的で作る「親テーブル」と、そこに組み込む素材の位置を決める「子テーブル」のように入れ子の構造を形成する。親テーブルのセルに子テーブルをいくつも入れたHTMLは、とても複雑で、文字情報がタグに埋もれてしまうほどだ。これではブラウザもレンダリングに少々の力を要するし、トラフィックの無駄にもなる【図2】。

【図2】　入れ子にしたテーブルの例。「素材」というテキストを等間隔に並べたり、文字のブロックを並列させる場合は複数のテーブルを入れ子にする必要がある

2.CSSの長所を生かしにくい

　CSSはページのパーツに与えるスタイルをサイト上で統一できることから、修正もコード１行の書き換えからサイト全体に直しが反映させられるという管理上の長所がある。ところがテーブルレイアウトではHTML側にスタイルを併記できる。そのためコードの作り方によっては部分的にスタイルがHTML側にある場合と、CSS側に持たせている場合とに分かれてしまうケースが起こり得る。例えば囲みの背景色はテーブルセル側に与えながら、文字色はfont styleタグで中のテキストに直接定義し、さらに行間はセルにCSSのclassセレクタを入れてしまう。という状態にもなり得る。このようなページを修正するためにはページ１つ１つのコードすべてに手を入れるほかない。

3.情報とスタイルを完全に分離できない

　前に例を挙げたようにCSSとHTMLスタイルの乱用により複雑なソースができあがる点も問題だが、テーブルによって位置をいったん固定された素材は、その後どんなデバイスからアクセスしてもそのHTMLで定義されたテーブルの状態に縛られてしまう。もし幅900ピクセルに固定したテーブルレイアウトによるページにプリンターがアクセスするとどうなるか。A4用紙には収まりきらず右側が切れるだろう。それでは機能的に問題だ。同時に文書構造を頼りに読み上げ順番を決める音声ブラウザにとっては、複雑に組まれたセルが分かりやすい文脈で文字を読み上げることを阻害してしまう。

4.正しい文書構造を作りにくい

　そもそも表組を形成する目的のテーブルタグを用途以外の手段にしているのだから、文書構造は二の次になってしまう。逆にナビゲーション部分のように本来はリストタグを与えるべき部分に、スタイル実現目的でテーブルタグを使ってしまえば、文書構造は損なわれる。見かけを素早くきれいに作り込めるテーブルレイアウトだが、その構造にはちょっと問題アリ。というわけなのだ。