＆lt; div＆gt; ＆lt; table＆gt;ではなく要素？

https://stackoverflow.com/questions/819237

03-07-2019
|

質問

重複：

最近は、テーブルタグよりもdivを使用してページをよりブラウザに馴染ませることについて多くの話がありました。 divの方が優れている理由

解決

いくつかの理由：

1）ほとんどの場合、divはより意味的に正しいです。サイトをテーブル構造でコーディングする人は、表形式のデータであるために、その目的のためにテーブルを使用していません。 divは「分割」を表します。またはページのセクションなので、アイテムをdivに入れる方がより正確です。

2）divはより柔軟で、スタイル設定と保守が簡単です。何かを言いたいときはいつでも＆lt; table＆gt;＆lt; tr＆gt;＆lt; td＆gt; Text here＆lt; / td＆gt;＆lt; / tr＆gt;＆lt; / table＆gt; を書く必要はありません代わりに＆lt; div＆gt; Text here＆lt; / div＆gt; と書くことができます。 cssフック（クラスまたは要素）をテーブルとdivの両方に追加できますが、divを使用すると無限に柔軟になります。

3）テーブル構造のサイトは見苦しいだけです：）

他のヒント

ここで重要なのは、レイアウトにそれらを使用することです。表形式のデータのテーブルに問題はありません。それが彼らの目的です。

ただし、レイアウトにテーブルを使用している場合、通常は異なる画面サイズ、ユーザーエージェント（モバイルブラウザーや視覚障害者向けのスクリーンリーダーを考えてください。特に後者の場合はうまく動作しません）コンテンツがユーザーに読み取られる順序を破棄します）。残念ながら、テーブルは、ページをレイアウトするための最も堅牢なメカニズムの1つです。これは、実装の違いがほとんどなく、10年以上問題なく動作するためです。ここでは、CSSはまったく別の問題です。

ただし、基本的には次のようになります。

テーブル

コンテンツとプレゼンテーションの区別に違反する
特に複数のページのレイアウトを同様の方法で変更しようとする場合、長期的には扱いにくく、維持できません
強いセマンティックな意味を持たない。これは、読み上げテキストのみに依存している障害のある人々にとって重要です。ここでは、表は行ごと、列ごとに読み取られますが、ほとんどの場合、表ベースのレイアウトではあまり役に立ちません

CSSレイアウト

正しく表示するのが難しい（少なくともプレゼンテーション用）
コンテンツとプレゼンテーションを（ときどき）きれいに分離できます。 CSSにはいくつかの制限があるため、いくつかのレイアウトとスタイルを正しく機能させるために、HTMLで複数のコンテナ要素を使用する必要があることが多いため、時々注意してください
＆lt; div＆gt; と＆lt; span＆gt; を盲目的に使用しないで、基礎となるマークアップ iff のセマンティックな意味を高めることができます。意味があり、そのように使用する必要のあるタグが多数あります。たとえば、＆lt; h1＆gt; を使用できる場合は、＆lt; div class =＆quot; heading1＆quot;＆gt; を使用しないでください。

テーブルはセマンティックな意味を伝えるため、現在h1と同様に表データを表示しているということは、見出しがあることを意味します。したがって、テーブルを使用して出力をフォーマットする場合、コードのセマンティクスの解釈を誤解させます。

これは、たとえば、スクリーンリーダーを使用しているユーザーのアクセシビリティの問題につながる可能性があります。

長所とamp; divベースの＆amp;の短所テーブルベースのデザイン。

デザインを簡単に制御できるため、テーブルを使用するよりもdivを使用する方が優れており、テーブルよりもコントロールのコンテナになり、テーブルはmainltを使用してデータを類似の構造にグループ化するため、デザインはこのタスク用ですが、divは主にテーブルよりもコンテナと見なされます。私は多くのコントロールを収集するときとコンテナを制御できるときの違いを見つけましたが、テーブルに入れたので混乱しました。

ほとんどの人は、テーブルをデータ専用に使用する方法について説明しています。レイアウト目的で使用すると、パフォーマンスの問題が発生します。また、＆lt; div＆gt;を作成できるため、より柔軟になるはずです。左に流れ、右に流れ、他のどこにでも流れます。

しかし、私見では努力する価値はありません。特に、対応するラベルと適切に整列するはずのコントロールの列がある場合、適切に整列するのに時間がかかりすぎます。

レイアウトにテーブルを使用することはWebデザインにとって革命的でしたが、それは15年前のことであり、他の選択肢はありませんでした。この歴史のおかげで、今日のテーブルのレイアウトも考慮されています。

CSSベースのレイアウトは、テーブルベースのレイアウトよりもはるかに柔軟です。テーブルを使って簡単に達成できることがいくつかありますが、一方で、CSSを使用すると非常に簡単で、テーブルを使用すると非常に複雑または不可能なことがたくさんあります。

divを使用する主な理由は次のとおりです。

テーブルには静的グリッドがありますが、divは動的です。テーブルの最初の行は、すべての列を定義します（MS Excelなど）。次の行では、これらの列を組み合わせることができますが、最初の行で定義した基本レイアウトを変更することはできません。 Divは動的です。パッチワークを作成して、divをオーバーラップさせたり、間にスペースを入れたりできます。あなたが望むものなら、なんでも。行で考えることを強制されません。あなたは自由だ。はるかに柔軟。
テーブルにより、レンダリングとブラウザ間の非互換性の問題が発生します。テーブルは常に同一に見えるとは限りません。各ブラウザは、テーブルとそのコンテンツの独自の解釈を提供します。したがって、多くの不快な驚き。あるブラウザでは、通常のテキストが太字フォントで表示されます。別のブラウザは、テーブルに他のhtml要素に多少のマージンを与えます。したがって、テーブルは適切に配置されていません。複雑な回避策を使用してこれらの問題を解決するのに何時間もかかります。 Divはすべてのブラウザで常に同じように見えます。 divを使用している場合、IE（webprogrammersのトラブルメーカーとしてよく知られています）でさえ、問題が少なくなります。
Divsレンダリングの高速化： Divはテーブルよりも高速にロードされます。ページ間の高速ブラウジング。ルックアンドフィールの改善。

お役に立てば幸いです。乾杯。

CSSとテーブルを使用し、場合によってはDIVを使用していますが、テーブルは非常に包括的です！そして、彼らはDreamweaver、Frontpageでとても素敵に見えます... テーブルを放棄するのは非常に難しいですが、ページをより速くロードする必要があるため、そうするようです！

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow