table、css、divの比較-jsチュートリアル-php.cn

1.テーブルのご紹介

Ⅱ。 p+css 入門

「p+CSS」というのは実は間違った名前で、標準的な名前は XHTML+CSS であるはずです。なぜなら、p と Table は両方とも XHTML または HTML 言語のマークであり、CSS は単なる表現形式だからです。

p +CSS には 2 つの本質的な意味があります:

1. p を使用して構造を完成させ、CSS を使用してページを合理化し、柔軟性を向上させます。 CSS に習熟したデザイナーは、p の繰り返しのネストを回避できるため、ページの読み込み速度とサイトの保守性が大幅に向上します。
2. CSS に合わせて p を選択する理由 CSS の核となるのは「ボックスモデル」であり、TABLE の構造が複雑すぎるため、p ほど「ボックスモデル」の本質を理解できるタグはありません。この時点では、TABLE+CSS もオプションですが、p にはフローティングカスケードという別の利点があり、レイアウトに TABLE を使用する Web サイトは W3C 検証に合格できないことを忘れないでください。

2.1 p

の概要2.2 cssの概要

CSSは、フォント、色、位置などのスタイル構造を定義する言語であり、情報の書式設定と表示を記述するために使用されます。ウェブページ上で。 CSS スタイルは、HTML Web ページに直接保存することも、別のスタイルシートファイルに保存することもできます。いずれの場合も、スタイルシートには、指定されたタイプの要素にスタイルを適用するためのルールが含まれています。外部で使用する場合、スタイルシートルールは、ファイル拡張子 _css が付いた外部スタイルシートドキュメントに配置されます。

スタイルルールは、テキストの段落やリンクなど、Web ページ内の要素に適用できる書式設定の指示です。スタイルルールは、1 つ以上のスタイル属性とその値で構成されます。内部スタイルシートは Web ページに直接配置され、外部スタイルシートは別のドキュメントに保存され、Web ページは特別なタグを介して外部スタイルシートにリンクされます。

CSS という名前の「カスケード」は、スタイルシートルールが HTML ドキュメントの要素に適用される方法を指します。具体的には、CSS スタイルシート内のスタイルは階層を形成し、より具体的なスタイルが共通のスタイルをオーバーライドします。スタイルルールの優先順位は、この階層に基づいて CSS によって決定され、それによってカスケード効果が実現されます。

三． Table と p+css の違い

1: 速度と読み込み方法の違い
p の読み込み方法は、

に遭遇しても、

に遭遇しない場合でも読み込みます。コンテンツ内の p は、読み込んだ分だけロードします。テーブルのロード方法は、に遭遇した後、

を読み取る前にロードするか、テーブル内のコンテンツがロードされません。中断 (document.onload() イベント), これは、TABLE に複数の行と複数の列が含まれているためで、TABLE のすべての内容が読み込まれた場合にのみ、IE はそれを表示する方法を知っています
2: Web アプリケーションの違い
table がページの先頭と末尾に p を追加すると、読み込む前にページ全体が読み込まれるまで待つ必要があります
ページの先頭と末尾に p を追加しても影響はありません
3: p の使いやすさの比較大規模な Web サイトのテーブルレイアウト
P と TABLE 自体には長所も短所もありません。いわゆる Web 標準が推奨されるだけです。たとえば、p はレイアウトに使用されますが、TABLE は元々 2 つの形式を変換するために使用されます。寸法データ。 TABLE にやるべきことをやらせても、ページに表示されなければ、TABLE がそれほど優れているとは言えません。

4: 生産効率

テーブルの生産効率が p の効率よりも高いことに異論のある人はいないと思います。明らかに、すべての p レイアウトコードは手動で記述する必要があります。コードに精通していても、Dreamweaver ほど高速ではありません。したがって、Table はテーブル自体のパラメータ定義を通じて構造化されたインターフェイスを簡単に構築でき、必要な効果をもたらすページレイアウトを迅速に定義できます。

5: ブラウザの互換性の問題

Table と p 互換性の問題の中でも、table にはさらに利点があります。

私たちがよく使用する IE6.0 および IE7.0 Firefox ブラウザは、CSS 設定に非常にこだわります。多くの場合、同じ CSS が 2 つのブラウザで異なる結果になるため、デザイナーとプロデューサーにとっては大きな問題になります。ユーザーのブラウザを排除して統一することは不可能なので、制作時に構文やレイアウト方法を調整するしかありません。 p では css を厳密にサポートする必要がありますが、table ではそれほど考慮する必要はありません。表の厳密さは、さまざまなブラウザーでよく表されます。

6: スケーラビリティと可読性

テーブルのスケーラビリティと可読性は低く、拡張性が低いとメンテナンスと修正に反映されます。 p Web ページのレイアウトを再設計したり、元の Web サイトの HTML やプログラムページを変更したりする必要はなく、CSS ファイルを変更するだけですべての変更が完了します。テーブルは一度に 1 ページずつ変更する必要があります。

基本的に、大量のコードからどれがタイトルでどれがテキストであるかを誰が判断できるような読みやすい表はありません。すべて

です。もう 1 つの障害は、テーブルコンテナにコンテンツが多すぎると、ブラウザが最初にタグを読み込む必要があり、< に読み込まれる前にテーブル内のコンテンツが表示されないため、ページの読み込み時間が長くなるということです。 ;/テーブル> .

4つ。 Table と p+css

table の利点と欠点: 開発時間が短い (DW を使用すると開発が高速化される); 純粋なテーブルブラウザーには互換性の問題がありません。検索エンジンで上位に表示されます。レイアウトの変更、再開発が必要; テーブルにプルなどが含まれる場合、ブラウザの互換性の問題が発生する可能性がある; テーブル内のテーブル、複雑なメンテナンス

p 利点: コンテンツと表示が分離されているため、 Web ページのレイアウトは維持および拡張するのに便利で、ニーズが変化したときにその効果が最も顕著になります

p メソッドを使用して Web ページのフレームをレイアウトする利点: CSS スタイルを通じてフレームに強力な属性を設定でき、 Web ページの一部を任意に配置できます。ページの閲覧速度は速く、個別の CSS ファイルを変更することでページのスタイルを自由に変更および更新できます。欠点は、各 p コンテナーで制御する CSS スタイルを定義する必要があることです。製造プロセスはテーブル法よりも複雑です。今日の Web ページでは、Web ページのレイアウトに p メソッドを使用する傾向がますます高まっています。

CSS+p Web サイトデザインの利点

まず第一に、CSS の大きな利点は、大規模な Web サイトの場合、コードが簡潔であることにあり、ご存知のように、検索エンジンはクリーンなコードを好みます。その本当の意味は、(Web ページのコード全体における効果的なキーワードの割合) を増やすことです。そのため、CSS+p Web 標準を使用して作成された Web サイトには、検索エンジンに優しいという特定の利点があります。

第二に、CSS+p によって作成された Web サイトでは、多くの問題がプログラムを変更せずに CSS を変更するだけで済むため、Web サイトの修正コストが削減されます。

CSS+p ウェブサイトデザインのデメリット

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

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

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

私はウェブサイト全体を構築するために p+css を使用しました。それが純粋な p レイアウトの場合、特に p レイアウトを使用する場合、いくつかのページ効果を放棄する必要があります。など、画像の角が丸いのはVS2005デザイナーでは変形してしまう可能性があるので、あまりpsをかけすぎるとajaxドラッグエフェクトを実装する際に面倒になるので、今のところはまだ p + ネストされたテーブルだと思います。

以上がtable、css、divの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。