html - の代わりに要素？複製: HTML のレイアウトにテーブルを使用しないのはなぜですか? DIV

Question

複製:

• HTML のレイアウトにテーブルを使用しないのはなぜですか?
• DIV 対テーブルまたは CSS 対愚かであること

---

最近、table タグではなく div を使用して、ページをよりブラウザらしくするという話がよくあります。なぜdivの方が良いのですか？

Answer 1

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

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

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

テーブル

• 内容と表現の区別に違反する
• 特に複数のページのレイアウトを同様の方法で変更しようとすると、扱いにくく、長期的には維持できません。
• 読み上げテキストのみに依存する可能性のある障害のある人にとって重要です。ここでは、テーブルは行ごと、列ごとに読み込まれますが、ほとんどの場合、テーブルベースのレイアウトではあまり役に立ちません

CSS レイアウト

• 正しく理解するのが難しい（少なくともプレゼンテーションの場合）
• （場合によっては）コンテンツとプレゼンテーションを明確に分離できます。CSS にはいくつかの制限があるため、HTML で複数のコンテナ要素を使用して、一部のレイアウトやスタイルを正しく機能させる必要がある場合があることに注意してください。
• やみくも<div>にand を使用しない限り、基になるマークアップのより良いセマンティックな意味が可能になり<span>ます。意味があり、そのように使用する必要がある多くのタグがあります。たとえば、 を使用できる<div class="heading1">場合は使用しないでください<h1>。

Answer 2

いくつかの理由:

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

2) div はより柔軟で、スタイルと保守が容易です。<table><tr><td>Text here</td></tr></table>代わりに書くことができる場合は、何かを言いたいときに毎回書く必要はありません<div>Text here</div>。css フック (つまり、クラスまたは要素) をテーブルと div の両方に追加できますが、div を使用すると無限に柔軟になります。

3) テーブル構造のサイトは単純に醜い :)

Answer 3

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

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

Answer 4

div ベースのデザインとテーブル ベースのデザインの長所と短所を次に示します。

Answer 5

div を使用すると、デザインで簡単に制御できるため、テーブルを使用するよりも優れています。また、テーブルよりもコントロールのコンテナーにすることができます。テーブルは、同様の構造を持つデータをグループ化するために主に使用されるため、このタスク用の設計ですが、div はコンテナーと見なされます。主にテーブルより。多くのコントロールを収集するときとコンテナーを制御できるときの違いを見つけましたが、テーブル内に挿入する必要があり、相互にループしているために混乱しました。

Answer 6

div を使用する個人的な主な理由を説明します。

• テーブルには静的グリッドのみがありますが、div は動的です。テーブルの最初の行はすべての列を定義します (MS Excel のように)。次の行では、これらの列を組み合わせることができますが、最初の行で定義した基本レイアウトを変更することはできません。div は動的です。パッチワークを作成して、div をオーバーラップさせたり、間にスペースを入れたりすることができます。あなたが望むものなら、なんでも。順番に考える必要はありません。あなたは自由だ。はるかに柔軟です。

• テーブルは、レンダリングとブラウザー間の非互換性の問題を引き起こします: テーブルは常に同一に見えるわけではありません。各ブラウザは、表とその内容を独自に解釈します。したがって、多くの不快な驚きがあります。あるブラウザでは、通常のテキストが太字で表示されます。別のブラウザでは、テーブルが他の html 要素に対して多かれ少なかれ余白を持っているため、テーブルが適切に配置されていません。これらの問題を複雑な回避策で解決するには、何時間もの作業が必要です。div は、すべてのブラウザで常に同じように見えます。IE (Web プログラマーにとってトラブルメーカーとしてよく知られている) でさえ、div を使用している場合は問題が少なくなります。

• Div のレンダリングが速い: Div はテーブルよりも速くロードされます。ページ間の高速ブラウジング。より良いルック アンド フィール。

それが役に立てば幸い。乾杯。

Answer 7

ほとんどの人は、テーブルがデータのみに使用されることになっている方法について続けており、レイアウト目的で使用するとパフォーマンスの問題が発生します。また、 <div> フローを左に、右に、その他の場所にフローできるため、より柔軟になるはずです。

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

Answer 8

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

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

Answer 9

私は CSS とテーブル、時には DIV を使用していますが、テーブルは非常に包括的です! そして、Dreamweaver や Frontpage ではとても見栄えがします... テーブルを放棄するのは非常に難しいですが、そうするようです。なぜなら、ページの読み込みを高速化する必要があるからです!