こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

テーブルタグとCSSについて

現在作成しているWebサイトは、テーブルタグをたくさん使っているせいか、とてもレスポンスが遅いのです。
テーブルタグはとても表示に時間がかかるとWebで見ました。
CSSでテーブルのようなものを作成できるというのを見たのですが
かなり速度は変わりますか?
CSSにあまり詳しくないので、もしそんなに変わらないようでした
ら一から作り直すのはやめようと思うのですが、かなり違うようでしたら勉強して作り直そうと思っています。
現在テーブルはかなり入れ子にして作っています。

投稿日時 - 2006-06-08 21:23:36

QNo.2203806

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(7)

かなり前の質問のようですので、ご質問者様はもうご覧にならないかもしれませんが、
今後、同じような悩みを持つ方がいると思いますので、
回答させていただきます。

私も同じ疑問を持っており、この回答を拝見させていただきました。
特に私自身は、TABLEの入れ子で作ったものとDIVの入れ子で作ったものでは、
表示されるタイミングにどのような違いがあるのか興味を持っておりました。

参考URLに示したページのとおり、TABLEを利用した場合は、
TABLE内のすべての内容がブラウザに受信されるまで表示されませんので、
体感速度はとても遅くなるようです。
これをDIVの入れ子にした場合どのようになるのかを
簡単なものでテストしてみました。
以下がそれです。

------- ここから ----------
<div>
<div>A</div>
<script>alert("DIV A");</script>
<div>B</div>
<script>alert("DIV B");</script>
<div><table><tr><td>AAAAA</td></tr></table></div>
<script>alert("TABLE IN DIV AAAAA");</script>
</div>
<script>alert("DIV END");</script>

<table><tr>
<td><table><tr><td>A</td></tr></table></td>
<script>alert("TABLE A");</script>
<td>B</td>
<script>alert("TABLE B");</script>
<td>C</td>
<script>alert("TABLE C");</script>
</tr></table>
<script>alert("TABLE END");</script>
-------- ここまで ----------

上半分はDIVの入れ子の場合で、下半分がTABLEの入れ子の場合です。
DIV内の入れ子が表示されるごとに、
TABLE内の入れ子が表示されるごとに、
ALERTで処理をとめてみました。

IE6で実行してみたところ、
■DIVの場合
 入れ子のDIVがひとつずつ受信されるごとに画面に表示されます。

■TABLEの場合
 最後の”TABLE END”のALERTが表示されるまで内容は一切表示されません。

このように、
すべてを受信してから「一括で」表示するTABLEよりも、
少しずつ内容が表示されるDIVの方が
「表示の始まりのタイミング」が早いため、
最終的にすべての内容を表示するまでに要する時間に違いがあまりなくても、
体感速度が速くなるのではないでしょうか。

TALBEよりはDIVを使ってレイアウトをCSSで定義する方が
表示速度が速くなるといわれている理由のひとつは
このことによる「体感速度の向上」にあるのではないかと思います。
# 他にも理由はあると思いますが…(^^;

参考URL:http://css.marutoku-navi.com/103.php

投稿日時 - 2006-11-12 03:16:37

ANo.6

こんばんは。
わたしが趣味で制作したサイトもテーブルレイアウトで作っていました。
テーブルを何重にも入れ子にしていて、画像も配置していましたのでかなり重かったですね。

そこで思い切ってサイトデザインを全てCSSに切り替えました。
速度は劇的に変わりましたね。
ダウンロードスピードの計測ではADSLでだいたい20秒ほど表示が早くなったという結果がでました。
(もちろんテーブルレイアウトでどれだけ入れ子にしているかによりますが、劇的に変わったということはかなり無理なことをしていたんでしょう。汗)

質問者様のサーバのレスポンスが遅いために、表示が遅いだけかもしれないので、一概にテーブルレイアウトのせいでとは言い切れないのですが、それでもこの機会にCSSに乗り換えをオススメします。

というのも、CSSデザインにしてみてすごく良かったと思うことは、ソースが非常にすっきりしたことです。
今まではタグの間に文字を入れていて、非常に見にくくちょっとでも間違って消してしまうとたちまちレイアウトが崩れ、さらに修復も難しい状態でした。(^-^;
ところがCSSデザインでは、まさに文字が主役!ソースだけ見てもどういう趣旨のサイトなのか読み解けるほどです。(テーブルレイアウトではタグばっかりで、一瞬見ただけでは読む気もおきませんよね。。汗)

あとデザインもひとつのCSSファイルで他の全てのHTMLファイルのデザインを制御することが可能で非常にメンテナンスしやすいです。

ただデメリットとしては、完全にHTMLをリメイクしなければいけないこと、異機種間でのCSSの解釈の開きが思いも寄らぬ表示結果になってしまうこと (最新ブラウザでもMacとWinでは全然違った表示になったりします) 、対応していないブラウザもあること、などがあるので注意が必要です。

長文失礼しました。参考になれば幸いです♪

投稿日時 - 2006-06-11 04:36:37

ANo.5

テーブルレイアウトは、HTMLの性質上本当は出来ない事です。
table要素は表なので、殆どのブラウザは表として表示しますが、ブラウザ側がそのような表示をする必要はありません。
また、HTMLを読む機能の付いているブラウザでは、テーブルの部分を表として理解できるように読む必要があります。テーブルレイアウトも例外ではありません。

其れに対し、CSSはHTMLの見た目を定義するものなので、CSSはテーブルレイアウトの代わりとして使えて当然です。

投稿日時 - 2006-06-11 00:31:20

ANo.4

ブラウザは<table>~<table/>まですべて読み込まないと表示しない、ということです、何階層にもネストされていればそれだけ時間がかかるというものです。

CSSレイアウトの場合、装飾部分をヘッダ内または別ファイル読み込み(こちらのほうがHTML自体を軽量化できます)ですから表示スピードは速くなるはずです。

が、ユーザーの多くがブロードバンド接続を利用している現在、その差を感じられるのかは疑問です。しかし、ナローバンドユーザーのアクセスのためにもページを軽量化させなくてはいけません。

で、実際すべてのレイアウトをCSSで行なうとなるとユーザーシェアが最も多いIE6(Win)においてのボックスモデルのwidth解釈(のバグ)によるレイアウトの崩れに必ず出くわすはずです^^;

【IE6のwidth解釈バグ対処法】
http://adp.daa.jp/archives/000265.html

要は「widthとpadding、borderを一緒に指定しない」大原則とCSSハック
【脱テーブルレイアウトでCSS化】
http://cssdepot.ts-web.net/sak_04.html

などで対処せざる状況です、Quirks(後方互換モード)ではなくStandards(標準準拠モード)で表示させるためにもDOCTYPE宣言をきちんと記述しなくてはなりません。
【Operaの例/ Opera 7, 8 の DOCTYPE スイッチ】
http://jp.opera.com/docs/specs/doctype/

テーブルレイアウトから移行であればハイブリッドレイアウト(外枠をテーブルとしてコンテンツ部分をCSSレイアウト)がいいと思いますよ。
http://hybrid-design.skr.jp/navi/hd_intro1.html
http://hybrid-designing.main.jp/re_design/re_design-00.html

ボックスのみのレイアウトに比べて楽は楽です、ただし「暫定的なもの」と理解してください。

出てきたキーワードで検索すると多くの情報がありますよ。

投稿日時 - 2006-06-08 22:29:31

ANo.3

個人的にはテーブルタグのせいでレスポンスが悪いという例を体感した事がないので何とも言えませんが、テーブルレイアウトをCSSレイアウトに変更することによって、HTML構造の単純化、アクセシビリティーの向上、SEO等、恩恵をこうむることもあります。今後はますます、こういったWEB標準化が進むことには間違いありませんので、是非この機会にテーブルの入れ子構造を解消して、CSSでのレイアウトに変更されることをお勧めします。

投稿日時 - 2006-06-08 22:27:28

ANo.2

テーブルタグを多く使用した場合、文字や画像数により遅くなるという報告もあり、また更新作業が面倒なので、CSSにしました。
その時の参考URLです

参考URL:http://css.marutoku-navi.com/100.php

投稿日時 - 2006-06-08 22:21:15

ANo.1

速さはあまり変わらないと思いますよ。
変わったとしても最近の回線速度だったら、
体感出来るほどのものでは、
ないと思います。

利用しているサーバのレスポンスが悪いのかもしれません。

投稿日時 - 2006-06-08 22:17:51

あなたにオススメの質問