html - なぜウェブサイトのレイアウトにテーブルを使用するのがそんなに悪いのですか

Question

私は、2 年以上ぶりに asp.net を使用している Winforms およびビジネスエンジンの開発者であり、その間にいくつかの規則の変更に気付きました。

反「レイアウト用テーブル」運動の背後にある論理は何ですか?

レイアウトを処理するために css クラスを使用できるようにするためですか? もしそうなら、これは静的なままであると確信しているページで本当に問題になるのでしょうか?

score 36 · Accepted Answer

いくつかの追加のポイント：

それについて熱狂的にならないでください。CSSは完璧ではなく、テーブルを使用するとはるかに簡単に実行できることがいくつかあります。したがって、必要に応じて、そこに小さなテーブルを置きます。それはあなたを殺すことはありません。
テーブルベースのレイアウトの主な「悪」は、ページを正確に制御する唯一の方法であった、深くネストされた混乱のようなものでした。テーブル内のテーブル内にテーブルがあり、間隔を制御するために戦略的に配置された透明な画像があります。これは最近ではかなり珍しいことだと思います。CSSを使用すると、この混乱の90％をクリーンアップできます。
レイアウトを説明するのではなく、ページに意味を与えるためにタグが存在する「セマンティックWeb」は良い目標です。ただし、現在のバージョンのHTMLは、到達に向けてそれほど進んでいません。その結果、ページには常にレイアウト用のタグがたくさんあり、他の意味はありません。これは、コンテンツとレイアウトをできるだけ分離しようとすべきではないという意味ではありません。それはあなたが100％そこに到達しないことを意味します。

score 23 · Accepted Answer

アクセシビリティが難しくなります。あなたがテキストブラウザで、Web サイトのコンテンツを目の不自由な人に読み上げたいとします。ほとんどのテーブルベースのレイアウトは、スクレイピングとマシンの「理解」が非常に難しい傾向があります。

これらのテーブル対 CSS の議論では、多くのエリート主義/政治/狂信が進行していますが、大規模には、CSS レイアウトはテーブルベースのレイアウトよりもクリーンです。

理論的には、保守も容易です。たとえば、ナビゲーションを左から右に移動したいとしますか? もちろん、CSS ファイルを 1 つ変更するだけで問題ありません。ただし、これは通常、CSS が頻繁に深くネストされ、変更が容易ではない複雑な Web サイトではうまくいきません。一方、テンプレートシステムでは、テーブルベースのレイアウトが完全に維持できないわけではありません。

score 16 · Accepted Answer

<table> タグは、表形式のデータを表示するときにまだ合法的に使用されていることに注意してください。私が使用する経験則は、スプレッドシートに簡単に収まるものを表示する場合は、テーブルタグを使用する方法です。

score 8 · Accepted Answer

いくつかの理由があります。理由の 1 つはアクセシビリティです。レイアウトテーブルはコンテンツにセマンティクスを追加しないため、スクリーンリーダーで問題が発生します。したがって、表形式のデータにはテーブルのみを使用してください。

より詳細に質問に答えるいくつかのポイントを次に示します

score 5 · Accepted Answer

サイトポイントにはかなり良い記事があり、テーブルとcssでページを直接デザインすることができます。これは非常に興味深い読み物であり、テーブルでマングルされたソースコードなどのテーブルを使用する場合の設計者/開発者にとっての主な落とし穴のいくつかを強調しています。追加のソースコードが必要になることが多く、将来の変更は必然的に複雑になります。

score 4 · Accepted Answer

テーブルベースのレイアウトに対する批判の主なポイントの 1 つは、それらが厳格であるということです。これらは、すべてのブラウザーでピクセル単位の完璧なページを作成するために使用されました。これの代償は剛性であり、アクセシビリティを損ないます。800x600 ピクセルの画面のレイアウトデザインでは、ワイドスクリーンの HD ディスプレイを使用している人は、すべてを読むためにかなり目を細める必要があります。訪問者がブラウザでフォントサイズを強制的に大きくすると、レイアウトが崩れ、場合によってはかなりひどくなります。

CSS 駆動のレイアウトは柔軟性があり、任意の画面/フォントサイズで見栄えのする (似ていますが同じではない) レイアウトを作成するために使用できます。改善された内部構造は、スクリーンリーダーやその他のアクセシビリティツール、およびモバイルプラットフォーム/デバイスにも役立ちます。

table タグは非推奨ではなく、CSS 駆動のレイアウトで果たす役割があります。表形式のデータを表示する場合 (スプレッドシートなど) に使用する必要があります。これには完璧ですが、ページレイアウトには使用しないでください。

score 2 · Accepted Answer

これはトピックに当てはまらないかもしれませんが、CSS レイアウトで最も頻繁に発生する問題は、親ノードをオーバーフローさせるのではなく、常に親ノードを引き延ばすように設定するのが難しいことです。これは、IE が FF とはまったく異なることを行っている非常にまれではないインスタンスの 1 つに遭遇すると、さらに大きな苦痛になります。テーブルでこの混乱を修正することは、通常、他の方法で使用せざるを得ないさまざまな JS 回避策よりも簡単で、準拠しています。

score 2 · Accepted Answer

Designing with Web Standardsという本を読むことを強くお勧めします。デザイナー、開発者、およびよりビジネス指向の役割を持つ人々に適しています。

score 2 · Accepted Answer

ページのコンテンツ/意味をマークアップすることは、より良いことであるという考えです。これにより、簡単に変更したり、スタイルを設定したりできるようになるだけでなく、(おそらくもっと重要なことに)スクリーンリーダーなどを使用しているユーザーにとってアクセシビリティが向上するためです。検索エンジンのために！）。Dive into Accessibilityをいつか読んでください。[そして、表形式のデータがある場合は、もちろんテーブルを使用する必要があります。]

「レイアウトには表ではなくCSSを使おう」というのは非常に重要なルールであり、できる限り従うべきですが、最終的には「正しいことをする」にはコストがかかります。優先順位を再考してください。見る http://giveupandusetables.com/

score 2 · Accepted Answer

正直なところ、反テーブルの群衆は、単に標準のナチスであるという罪を犯していることがよくあります. 実は、「リード」が実際のリードを使用することを意味していたので、人間はレイアウトのためにテーブルを使用してきました。

テーブルに対する主な議論はアクセシビリティです。これは重要なトピックです。しかし、CSS は本当の犯人に対する応急処置にすぎません。HTML はひどいマークアップ言語です!

HTML がレイアウト用であってはならないのであれば、なぜ <center>、<b>、<u>、または <i> があるのでしょうか? 段落を意味的にグループ化するための <story> タグがないのはなぜですか? 見出しタグが 6 つあるのはなぜですか?

明らかにそうではないのに、HTML が厳密にセマンティックであるふりをするのをやめる必要があります。CSS はプレゼンテーションを実装するのは得意ですが、それを定義するのはあまり得意ではありません。もしそうなら、3 列のレイアウトを行うために div スープは必要ありません。HTML5 で実際に起こるべきこと (もちろんそうではありません) は、明確な役割を持つレイアウトタグを持ち、CSS を使用してそれらのタグが何をするかを明確にすることです。

score 1 · Accepted Answer

正直なところ、テーブルの使用についてはそれほど心配しないでください。最高の、最も意味的に正しい人々の何人かでさえ、ドキュメントの流れがより簡単であるならば、テーブルを使用することを勧めます。うまくいくものを使用するだけです。テーブルを使用することのデメリットはそれほど大きくありません。

score 1 · Accepted Answer

1

読み込みが遅い
意味的に正しくない

于 2008-11-24T07:48:17.533 に答える

score 1 · Accepted Answer

Most advantages (faster, no spacer.gif, accessibility, content vs mark-up etc) are mentioned already, but it surprises me that nobody mentions that css can do stuff tables just can't or is at least easier.

Furthermore, it's just a thing of using the right tool for the right job. Tables are for tabular data and css is used for styling your content. What people tend to forget is, you can also style your tables ...

The problem is that browser support is lacking. Therefore people use hacks. Therefore browsers interpret css differently to accommodate those hacks. It's a never ending circle.

score 1 · Accepted Answer

IE8 での新しい CSS 表示プロパティのサポートにより、テーブルと CSS に関するこの議論は間もなく終了する可能性があります。グリッド/テーブル形式のレイアウトを考える方が簡単で賢明であるため、CSS プロパティとしてtable、table-row、table-cell、table-caption、table-column、table-row-groupなどを利用できると便利です。レイアウトの実装を大幅に。

この記事には、詳細な概要があります。

html - なぜウェブサイトのレイアウトにテーブルを使用するのがそんなに悪いのですか

14 に答える 14

Related

Reference