HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / テーブルタグの使用について
テーブルタグの使用について
テーブルタグをレイアウトなどに使用する場合は、以下の点にご注意ください。
　テーブルレイアウトについて
テーブルタグは表を作るためのものなので、レイアウトなどに使うことは仕様上「好ましくないこと」とされています。レイアウトなどの見栄えの部分には、できるだけスタイルシートを使うことをオススメいたします。

と、書くべきところなのですが、実際にはスタイルシートだけでレイアウトすると、ブラウザの違いにより思ったとおりに表示されないケースが多々あります（私の腕のせいかもしれませんが…）。例えば、IEでは良い感じで表示されるのに、ネットスケープで見ると変になる、またはその逆の場合もあります。ブラウザごとにスタイルシートを切りかえれば良い話しなのですが、通常はなかなかそこまではできないですよね。

その点、テーブルタグでレイアウトされたページは、どちらのブラウザで見てもほぼ同じように表示されます。HTMLインデックスの場合はほとんどテーブルレイアウトなのですが（2005年10月よりスタイルシートへの移行作業を開始）、これはNN4.7という化石のようなブラウザで見ても、IE6で見ても、NN7で見ても、いずれも同じように表示されます。現状では、テーブルタグを使ったほうが安全にレイアウトできると言えるでしょう。

しかしながら、テーブルレイアウトにはメリットばかりがあるわけではありません。ページ全体をテーブルで囲ってしまったり入れ子にしすぎると、表示が重くなってしまうというデメリットもあります。また、私自身は試したことはないのですが、テーブルでレイアウトされたページは、音声読み上げブラウザ（目の不自由な方が使用されるブラウザ）などでは内容が正常に表現されないようです。それ以外にも、アクセシビリティの点で言えば、テーブルレイアウトはあまりよろしくない手法と言えるかもしれません。

現時点では「テーブルレイアウト」が主流（？）のようですが、将来的には「レイアウトはスタイルシートで」が主流になっていくようです。今の「手軽さ」や「安全性」を重視するのであればテーブルレイアウトを、「将来性」や「アクセシビリティ」を重視するのであればスタイルシートを、といった感じでしょうか。

個人的には、ページ全体のレイアウトはテーブルタグで、細かい見栄えの部分はスタイルシートで、というのが現状ではベストなのではないかな？と考えています。

と、以前は考えていましたが、この記事を書いてから数年経過した現在では、全体のレイアウトに関してもスタイルシートで行った方が良いと考えています。（2007年6月現在）

このホームページ作成ガイド自体、もうかなり旧式になってしまったため、そのうちリニューアルしたいと考えています。（実は途中まで作業を進めたものの中断してしまいました…）
　テーブルレイアウトの注意点
テーブルでレイアウトする場合は、「できるだけページ全体を1つのテーブルで囲まない」「入れ子を使いすぎない」という点に注意してください。（どちらもページの表示を遅くする原因になってしまいます。）

例えば次のようなレイアウトの場合、


タイトル
メ
ニ
ュ
｜		 メインエリア
連絡先
タイトル
メ
ニ
ュ
｜		 メインエリア
連絡先


左のように1組のテーブルでレイアウトするよりも、右のように3組のテーブル（上中下）でレイアウトしたほうが表示は速くなります。

左のレイアウトでは、全ての内容を読み込んでから表示を開始します（待ち時間が長い）。それに比べて右のレイアウトでは、まず「タイトル」を表示→「メニュー・メインエリア」を表示→「連絡先」を表示、といった感じで段階的に表示されるので、表示が速く感じられます。

入れ子については、「何重までなら大丈夫」というのははっきり言えないのですが、せいぜい3〜4重くらいまでにしておいたほうが無難でしょう。これまでの経験からは、それ以上入れ子にすると重く感じてきます。

ホームページ作成ガイドTOP


HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system