締切済み

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

2006/06/08 21:23

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

milkteaJ
お礼率12% (2/16)

HTML
回答数7
ありがとう数2

みんなの回答 （7）
専門家の回答

みんなの回答

noname#227760

2006/11/12 03:16 回答No.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

noname#58564

2006/06/11 04:36 回答No.6

こんばんは。わたしが趣味で制作したサイトもテーブルレイアウトで作っていました。テーブルを何重にも入れ子にしていて、画像も配置していましたのでかなり重かったですね。そこで思い切ってサイトデザインを全てCSSに切り替えました。速度は劇的に変わりましたね。ダウンロードスピードの計測ではADSLでだいたい20秒ほど表示が早くなったという結果がでました。 (もちろんテーブルレイアウトでどれだけ入れ子にしているかによりますが、劇的に変わったということはかなり無理なことをしていたんでしょう。汗) 質問者様のサーバのレスポンスが遅いために、表示が遅いだけかもしれないので、一概にテーブルレイアウトのせいでとは言い切れないのですが、それでもこの機会にCSSに乗り換えをオススメします。というのも、CSSデザインにしてみてすごく良かったと思うことは、ソースが非常にすっきりしたことです。今まではタグの間に文字を入れていて、非常に見にくくちょっとでも間違って消してしまうとたちまちレイアウトが崩れ、さらに修復も難しい状態でした。(^-^; ところがCSSデザインでは、まさに文字が主役！ソースだけ見てもどういう趣旨のサイトなのか読み解けるほどです。(テーブルレイアウトではタグばっかりで、一瞬見ただけでは読む気もおきませんよね。。汗) あとデザインもひとつのCSSファイルで他の全てのHTMLファイルのデザインを制御することが可能で非常にメンテナンスしやすいです。ただデメリットとしては、完全にHTMLをリメイクしなければいけないこと、異機種間でのCSSの解釈の開きが思いも寄らぬ表示結果になってしまうこと (最新ブラウザでもMacとWinでは全然違った表示になったりします) 、対応していないブラウザもあること、などがあるので注意が必要です。長文失礼しました。参考になれば幸いです♪

pi8027
ベストアンサー率11% (6/53)

2006/06/11 00:31 回答No.5

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

fab76
ベストアンサー率59% (327/548)

2006/06/08 22:29 回答No.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 ボックスのみのレイアウトに比べて楽は楽です、ただし「暫定的なもの」と理解してください。出てきたキーワードで検索すると多くの情報がありますよ。

kaiwarepon
ベストアンサー率49% (47/95)

2006/06/08 22:27 回答No.3

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