ホームページ > 記事 > ウェブフロントエンド > テーブル レイアウト モードと CSS DIV レイアウト モードの長所と短所の比較 (翻訳)_html/css_WEB-ITnose
テーブル レイアウト モードと CSS DIV レイアウト モードの長所と短所の比較 (翻訳)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:32:31960ブラウズ
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 を次のような理由で非難しています。
|