tableレイアウトに関する疑問をメールで頂きました。折角ですから返事はここに公開することにします。折角書いても一人にしか伝わらないメールよりは良いかなあくらいの理由です。
現在、多くのサイトでHTMLのtable要素がレイアウトを調整する為に使われているようですが、まず、これを二つのケースに分けます。
前者
後者は取るに足りませんので無視しますが、現在は前者のようなケースが圧倒的に多い為、tableはレイアウトを実現するのに好都合なのです。
これは言い換えれば、折角情報を「意味として」伝える手段が用意されているのにも拘わらず、その力を放棄しているとうことです。大多数のユーザーは、現在PCやMacでWWWブラウザを使ってウェブサイトにアクセスしていますから、その現状をそのまま反映しているのでしょう。ですから例えば、携帯端末からのアクセスが大多数であるサイトではtableレイアウトは使用されません。
「今現在における大多数」を最も重視するなら、tableレイアウトは有り得る選択肢です。
これは、ユーザースタイルシート等によってウェブページの見た目を閲覧者が好きなように変更できるという利点を失わせます。
「見栄えを閲覧者の好きにさせたくない」と考えるなら、tableレイアウトは有り得る選択肢です。
この他、Why avoiding tables (for layout) is important (英語) に挙げられているような弊害を覚悟し、納得出来るのであれば、tableレイアウトは有り得る選択肢です。
ですから、「何故多くのサイトがtableタグを誤用してレイアウトとして使っているのか」と問われれば、無知であるか、あるいは以上に挙げた選択肢を選択する制作者が多い、と答えます。尚、彼らには「HTMLの文法や仕様」等は眼中にありません。何故なら、現在の多くのWWWブラウザは「文法ミス」を補正するよう設計されているからです。
tableは、飽くまでもWWWブラウザには表としか解釈されませんから、例えばブラウザのウィンドウの幅を狭めたとしても、あるいはユーザースタイルシートを使ったとしても、セルの配置関係を崩すことはありません。意味が変わってしまいますから。つまり、現状の多くの閲覧者の閲覧環境が変化し、もっと小さな表示領域で閲覧することが主流になったならば、tableレイアウトは無闇矢鱈と横幅を占有する悪しきレイアウトになりますから、自然、減ってゆくと思われます。変化が無ければ、特に減りはしないと思われます。
時代だとか閲覧者の主流な環境だとかに左右されないデザインを目指すなら、tableレイアウトは選択肢には入りませんし、視覚的なデザインよりも内容の伝達を重視する制作者にとってtableレイアウトは余計な異物でしかありませんから、前者のような制作者を対象にしないこのサイトでtableレイアウトを推奨することは最初から有り得ないわけです。
「tableレイアウトが今後どうなってゆくのか」言い換えれば「閲覧者の主要な環境がどう変化してゆくのか」について、私はあまり興味がありません。
tableレイアウトを廃止し、同じようなレイアウトをCSSで行うには、多くの場合div要素型を使うことになります。
しかしそのような発想は、ウェブページのデザインを行う際の順序として「あべこべ」です。
あるウェブページに「ナビゲーション」と「コンテンツ」があったとします。制作者は、「ナビゲーション」を左側、「コンテンツ」を右側に配置したいと考えました。しかしここで初めて「レイアウトの為のdivを使う」と発想が出てきた時点で、それはHTMLにおける情報デザインの失敗を意味します。
本来の手順はこうです：
このような手順を踏んだにも拘わらずCSSでのレイアウトがうまく行かない場合、諦めることも肝心です。しばしば、そのような「レイアウト」は情報を上手く伝える為に余計な手段となっています。デザインとして失敗するでしょう。
HTMLの仕様で定義されていない要素は特にマークアップしないという選択肢もあります。これは、ウェブページの構成要素を出鱈目に認識してしまう危険を防ぐ手段として有効です。複雑なレイアウトをすることが出来なくなったり、情報の単位を思うように示すことが出来なくなりますが、一方、テキストエディタで編集する制作者にとって視認性が良くなったり、利用できるCSSが限定されることによって、素人が考える出鱈目な「視覚デザイン」を予防することが出来ます。
また、div要素やspan要素は、CSSスタイルシートでのレイアウトに便利である為よく使われますが、前述の「HTMLの仕様で要素型が定義されていれば、それを用いてマークアップを行い、」という手順をすっ飛ばす制作者がしばしば存在することが示す通り、これは陥りやすい罠である為、最初はこれらを禁止してみるという行為も推奨されて良いはずです。
あまり興味ありませんが、一応適当に具体的な手段を紹介します。
「ナビゲーション」を左側、「コンテンツ」を右側に配置したいと考えるなら、CSSのfloatプロパティを裏技的に使えます。
<div class="navigation">[ナビゲーション]</div>
<div class="contents">[コンテンツ]</div>
div.navigation{
float: left;
width: 30%;
}
div.contents{
float: right;
width: 55%;
}
堅苦しい話に飽きた方は息抜きにどうぞ。
この記事を推敲する際に一部参考にさせていただきました。「tableレイアウトはある条件の元有り得る」を連呼しているのはこの記事の影響です。わらい。