とは異なり、この属性は 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 を次のような理由で非難しています。
を記述する必要があります。また、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 を使用するのが安全な方法です。
テーブル:
第 4 に、CSS+DIV が検索エンジン用に最適化されているかどうかは、CSS+DIV 自体ではなく、Web デザインの専門レベルに依存します。 CSS+DIV Web デザインは、Web ページが検索エンジン用に最適化されることを保証するものではなく、HTML Web サイトよりも単純なコード設計になることさえ保証しません。また、検索エンジンによる Web ページの組み込みと並べ替えも保証されません。明らかに、テーブルや CSS の配置が使用されているかどうかによって評価されるわけではありません。これが、従来のテーブル レイアウトで作成された多くの Web サイトが検索結果で上位にランクされるのに、CSS や Web 標準を使用して作成された Web ページの多くが依然として下位にランクされる理由です。検索エンジンにとって、Web サイトの構造、コンテンツ、関連する Web サイトのリンクなどの要素は常に Web サイトの最適化にとって最も重要な指標であるためです。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
See all articles
