テーブル レイアウト モードと CSS DIV レイアウト モードの長所と短所の比較 (翻訳)_html/css_WEB-ITnose

2008 年後半に Web デザイナーとして、コードで Table を使用していることを認めるのは恥ずかしいことでしょうか? もしそうなら、あなたは Web デザインに独自の Web サイトを追加できる、奇妙な業界です。夕刊の案内広告や廊下のロック解除広告のようなものですが、ソース コードで Table を使用していることを誰にも知らせないでください。ズボンを引き上げたところ、Table が使用されていることが判明するようなものです。白い靴下を履いている。
表は非常に醜くて肥大化しています。単純なコンテンツのみを表示する場合でも、

という 3 つの基本タグと、各タグ内の乱雑な単語の束が必要です。

とは異なり、この属性は CSS と完全に一致しており、最も完璧な Box モデルを形成します。 1 つのレイアウトに飽きたら、CSS の定義を変更するだけで新しいレイアウトが生まれます。Table は行と列のようなものです。私たちの両親のように素朴で、脂ぎっていて、だらしなく、すべてを家に持ち帰り、隅に無造作に積み上げています。ディヴが小ブルジョワジーであるとすれば、テーブルはこの時代に属していません。

ここ数年、たかだか 3 ～ 5 年の間、W3C は誰もが重要だと思っていますが、その公式 Web サイトは、私の人生でこれほど醜いものを見たことがないと言えます。 , しかし、彼らの Web サイトは、すべての W3C 標準検証に合格できる数少ない Web サイトの 1 つです。つまり、Web サイトはまだ非常に見苦しいものの、文法、構造、アクセシビリティの点で完璧です。しかし、これは冗談です。W3C は非常に重要です。そうでないと、Microsoft はすべての Web 開発エンジニアを取り返しのつかない状況に追い込むことになります。幸いなことに、Netscape の死後、Nirvana は Firefox をリリースしましたが、Opera は Firefox の誕生後に何の恩恵も受けませんでした。 Firefox さん、少なくともあなたは精神的なサポートを受けてきました。ついに兄があなたの面倒を見てくれるようになったのがわかりましたか?ジョブズが戻ってきた後、Apple はかつての栄光を取り戻しました。そのとき初めて、人々は Safari というブラウザが存在することを知りました。これらすべてが組み合わさって、W3C の存在が本当に必要になったのです。

W3C によれば、Table はテキスト、書式設定されたテキスト、画像、リンク、フォーム、その他の Table を収容するために使用できます...ただし、Table は純粋に文書コンテンツをレイアウトする手段として使用されるべきではありません）、その理由は、Tableさらに、Table を使用すると、大型のディスプレイ デバイスで左右にスクロールする必要があるため、Web デザイナーは Table の代わりに CSS を使用する必要があります。 。テーブルの定義については、W3C HTML 4.01 を参照してください。 W3C がこれを言ったのは 1999 年 12 月 24 日のことでした。CSS は誕生してから長い時間が経っていましたが、元の Web はドキュメントのオンライン版のようなもので、現在のようなプラットフォームにはなりませんでした。第一次インターネット バブルの形成に伴って、多くのポータル Web サイトがテーブル レイアウトの元祖となりました。そのホームページは、新聞全体のページを合わせたよりも大きいためです。 Complex, Table はこの点で非常に便利で、colspan と rollspan を組み合わせることで、ほぼすべての複雑なレイアウトを実現できます。

このレイアウトスタイルは、2000年代初頭から中頃、特に米国では依然として非常に人気があり、人々は1ページに詰め込めるものをすべてホームページに詰め込みました。執事はすべてを整然と並べますが、完璧な順序ではありません。しかし、検索、RSS 購読、ブログに代表されるパーソナライズされた Web の出現により、人々はほとんど必要な少数の Web サイトにアクセスすることなく情報を入手できるチャネルが増えました。失神したポータルのホームページには、よりシンプルなレイアウト、明るい色、大きなアイコン、大きなバナー、そして読みやすい大きなフォントを使用した、新鮮で軽量な Web スタイルが同時に登場しました。 , CSS はすでに非常に成熟しており、Firefox、Opera、Safari などのブラウザは W3C 標準への準拠において IE よりもはるかに優れており、人々はついに CSS の威力に気づきました。 CSS の中核はレイアウトの点で Box モデルであるため、CSS をアタッチするコンテナ オブジェクトを見つける必要があります。

Div は、意味的には、ページの領域を表すため、幸運です。さらに重要なのは、

とは異なります。 a> には事前に特別なセマンティクスが与えられています (ボックス モデルでも使用できますが)。その一方で、肥大化した時代を支配する人々の憎しみから、時代の終わりに後継者が努力します。古い時代の痕跡を消すことは、おそらく人々が古い時代の象徴や代表者を単に忘れるのではなく、それらの間に明確な線を引くことになるでしょう。

テーブルからの不当な扱いはここから始まる。これはなぜ不公平なのでしょうか? W3C が Table レイアウトを推奨しないのに、代わりに CSS を使用する必要があるとだけ述べています。これはどういう意味ですか?もちろんサポートされています。Table は古い HTML オブジェクトであり、そのステータスが非常に重要であったため、どのブラウザでも CSS サポートを含め、Table を最も完璧にサポートしています。 Div を受け入れると、Table も Box であることを忘れるようです。Table は全体として、Box モデルとその内部セルの点で、 Margin を除いて、Div と何の違いもありません。これはまだボックスであり、内側のボックスにはマージンの概念が含まれていないことを理解する必要があります。 Div が優れていることは言うまでもありませんが、Div + CSS と言うと、Table は CSS を使用できないと思われますが、これは大きな誤解です。

Div でサポートされているすべての CSS プロパティは、Table でサポートされています。実際、Div が普及する前、Div を初期に採用した人たちは、Table でそれができるなら、Div でもできるとほとんど自信を持って表明していませんでした。また、彼らは自分たちの言葉を擁護しました。お金を払って Div で垂直方向のセンタリングを実現しようとしている人は私の意味を理解しますし、CSS Hack なしで IE6 で 100% Div レイアウトを達成しようとしている人は私の意味をさらに理解します。複数の Div 間の高さ 100% の問題、幅の適応の問題は、Div + CSS デザインに従事している人なら誰でも遭遇すると思います。この点での Table の利点は、それが優れているからではなく、古いものであり、それを無視するブラウザがないためでもあります。また、人々がデータをきれいに表示するためにテーブルを発明したためでもあります。それはとても簡単です。しかし、なぜテーブルはこれほどまでに悪名を轟かせたのでしょうか? Div 支持者は Table を次のような理由で非難しています。

コードの肥大化: 実際のコンテンツを開始する前に、少なくとも 3 つのタグ

を記述する必要があります。また、Table のさまざまなタグにも複雑な属性定義が含まれています。 Div に必要なタグは

1 つだけです。
ページ レンダリングのパフォーマンスの問題: ブラウザーは、レンダリングを開始する前にテーブル全体を完全に読み取る必要があります。
SEO に良くない: 検索エンジンは、コンテンツが装飾から分離されることを好みます。
アクセシビリティが低い: 画面読み上げソフトウェアと点字ブラウザは、表の内容をよく理解できません。
セマンティックが不十分: セマンティック Web が必要です。

記事 1: コードが肥大化しています

まず、Table で CSS で定義できない属性は Cellspacing と Cellpadding だけです。このように、残りの属性は CSS を使用できます。

と

の間の決闘では、サイズが数十 K であることが多い Web ページでは、たとえ数十のテーブルが使用されていたとしても、余分なコードは無視できると思います。 Table コードが肥大化していると不満を言う 実際、Table を非常に肥大化して記述できる人でも、Div を記述するときはそれほど簡潔ではない可能性があります。

記事 2: ページレンダリングのパフォーマンスの問題

私は 1.6G CPU と 1G メモリを搭載した 2004 年のラップトップを使用していますが、実際、Table レイアウトと Div レイアウトの違いでページレンダリングの速度は見られません。この違いがあっても、ネットワーク自体に対する遅延は無視できます。

第3条：検索エンジンの最適化に資しない

前述したように、Table属性の代わりにCSSをできるだけ使用すると、生成されたコードとDivの差があまり大きくならず、検索エンジンが区別してしまいます。

この声明の根拠は今のところ見つかりません。

項目 4: アクセシビリティの悪さ

これは Table の本質的な欠陥ですが、ほとんどの Div + CSS ファンはこの理由で Table を拒否するわけではないようです。

第 5 条: セマンティクスが不十分です

セマンティック Web の意味は、Table と Div だけが絡み合っているわけではありません。W3C でも、Table が表形式データの表示にのみ使用できるとは規定していません。これに苦労している人は、本当のセマンティクスである HTML 5 を待ったほうがよいでしょう。

この記事の目的は、Div を放棄して Table に参加させることではありません。逆に、Div が設計ニーズを満たすことができるのであれば、依然として Div が第一の選択肢ですが、そうでない場合は Table を避ける必要はありません。対極へ。 Div を使用すると簡単に実現できないデザインの多くは、Table を使用すると実現できます。もちろん、何を使用するとしても、CSS を使用してコンテンツと装飾を分離する必要があります。 Div + CSS と Table + CSS はどちらも正当なデザインであるため、より簡単な方を使用してください。私の経験によれば、コンテンツの形式を予測でき、追加しようとしているコンテンツの表示形式を完全に制御できる場合、追加しようとしているコンテンツが固定されていない場合は、Div + CSS を使用する必要があります。それを予測することはできません。その形式に関して、ページを折りたたんだくない場合は、テーブル + CSS を使用するのが安全な方法です。

テーブル:
利点: 1. ユーザーがテーブルを挿入すると、その効果がすぐにわかります。
2. シンプルで便利で、テーブルを使用するためにコードについて詳しく知る必要はありません。テーブルを挿入して、長さ、幅、配置、テーブルの属性などを設定するだけです。
3. 可読性が高く、HTML 言語を少し知っている人であれば、「table /table、td /td、tr /tr」などにすぎません。
短所: 1. コードの冗長性。「table tr td /td /tr /table」はテーブルを構成する最も基本的な要素です (これは 1 行 1 列のテーブルです)。
2. 再利用できません。たとえば、上で使用されているテーブルを下で使用する必要があるため、コードが多くなり、開くのが遅くなります。ウェブサイトの速度。

Div+css:
利点: 1. 合理化されたコード、div /div" はテーブル コードよりもはるかに単純です。
2. 再利用可能。たとえば、Web ページで 2 ～ 3 Div が必要な場合、ユーザーは定義するだけで済みます。たとえば、CSS で abc という名前のスタイルを定義します。 div を挿入する場合、必要なのは div id="abc /div" という形式だけです。これは複数回使用できるためです。コードが合理化され、サーバーがコードを読み取る時間が大幅に節約されるため、Web サイトを開く速度がテーブルよりもはるかに速くなります。 1. 編集時にユーザーが編集効果をすぐに確認できない。
2. Web サイトのコードはほとんどすべて div /div であり、このスタイルはコード ページでは確認できません。定義されたスタイルを表示するには、CSS スタイルを入力する必要があります。
3. 操作が面倒 初めての人やコードをよく知らない人に比べて、操作は非常に面倒です。

まず、CSS への依存度が高いため、Web デザインがより複雑になります。 HTML4.0 のテーブル レイアウト (表) と比較すると、CSS+DIV は手が届かないわけではありませんが、少なくともテーブルの配置よりもはるかに複雑で、初心者はもちろん、Web サイト デザインの専門家でも問題が発生しやすいです。これは、XHTML ウェブサイト デザイン言語の普及と応用にある程度の影響を与えました。

次に、異常な CSS ファイルは、Web サイト全体の通常の閲覧に影響を与えます。 CSS Web サイトで作成されたデザイン要素は、通常、複数の外部ファイルに配置されます。このファイルは非常に複雑であり、CSS ファイルが異常に呼び出されると、Web サイト全体が悲惨な状態になります。

第三に、CSS ウェブサイトのデザインにおけるブラウザーの互換性の問題は非常に顕著です。 HTML4.0 に基づいた Web デザインには、IE4.0 以降のバージョンではブラウザ互換性の問題はほとんどありません。ただし、CSS+DIV でデザインされた Web サイトは、IE では正常に表示されますが、Firefox では正しく表示されない可能性があります (これが、インターネット マーケティング担当者には認識できない理由です。 Firefox を使用することをお勧めします)。 CSS+DIV は、さまざまなブラウザ メーカーからのさらなるサポートがまだ必要です。

第 4 に、CSS+DIV が検索エンジン用に最適化されているかどうかは、CSS+DIV 自体ではなく、Web デザインの専門レベルに依存します。 CSS+DIV Web デザインは、Web ページが検索エンジン用に最適化されることを保証するものではなく、HTML Web サイトよりも単純なコード設計になることさえ保証しません。また、検索エンジンによる Web ページの組み込みと並べ替えも保証されません。明らかに、テーブルや CSS の配置が使用されているかどうかによって評価されるわけではありません。これが、従来のテーブル レイアウトで作成された多くの Web サイトが検索結果で上位にランクされるのに、CSS や Web 標準を使用して作成された Web ページの多くが依然として下位にランクされる理由です。検索エンジンにとって、Web サイトの構造、コンテンツ、関連する Web サイトのリンクなどの要素は常に Web サイトの最適化にとって最も重要な指標であるためです。