web-dev-qa-db-ja.com

なぜデザインで<table>を使用することになっていないのですか?

テーブルを使用してWebサイトを設計するべきではない明確で論理的な理由は何ですか?利点はどこにありますか、このアイデアを業界で推進しているのは何ですか?テーブルを使用しても大丈夫ですか?

41
Incognito

1)テーブルは次の理由でページレイアウトに使用しないでください。

  • ブラウザがすべてではないにしても、適切にレンダリングするためにテーブルのほとんどをダウンロードする必要があるため、レンダリングが遅い

  • 非テーブルレイアウトよりも多くのHTMLを必要とするため、読み込みとレンダリングが遅くなり、帯域幅の使用量が増加します

  • 彼らはすぐに複雑になる可能性があるため、維持するのが悪夢になる可能性があります

  • 彼らはテキストのコピーを破ることができます

  • スクリーンリーダーに悪影響を及ぼし、一部のユーザーがコンテンツにアクセスできなくなる可能性があります

  • 適切なセマンティックマークアップを使用するほど柔軟ではありません

  • ページレイアウトに使用することを意図したものではありませんでした

  • テーブルをレスポンシブレイアウトにすることは、制御が非常に困難です

2)表形式のデータには表を使用します。それがテーブルの目的です。

参照: なぜ人々はdivでテーブルを作成するのですか?

71
John Conde

表は表形式データ用であり、設計用ではありません。人々はしばしば、ページを「テーブルなし」にする背後にある動機を誤解します。

テーブルを使用してレイアウトを作成するのは間違っています。レイアウトには他の要素(div、リスト、セクション、記事、ヘッダー、フッター、サイドなど)を使用する必要があります。また、最小限のHTML/CSSで優れた効果を実現できます(意味的に意味のある、軽量で保守しやすいコードを残します)。

もちろん、表形式のデータはテーブル要素内にある必要があります。必要に応じて、thead、tfoot、tbody、th、captionなどを追加することで、テーブルのセマンティクスを改善することができます。これらの要素はすべてテーブルで使用することを目的としています。 。

そのため、テーブルベースの設計ではなく、適合するHTML/CSSソリューションを使用しないでください。 HTMLセマンティックマークアップから始めて、CSSでデザインを構築します。これにより、誰でも安全に保つことができます。これを経験則として使用してください。

8
Dave

テーブルには、設計要素ではなくデータが含まれていると想定されています。

3
sdadffdfd

テーブルは、表形式のデータを表示する場合にのみ使用してください。それ以外の場合、それらは通常、表示には適していません。

3
Chris Ballance

テーブルを使用しない本当の原因は次のとおりです。

テーブルのデフォルトのレイアウトは次のとおりです。table-layout:fixed

これにより、ブラウザにテーブルを分析し、セルを修正してその中に要素を含めるように指示します。これには時間がかかります。 (これが、テーブルが複雑なデータに非常に適している理由です)

一番下の行:テーブルは、たとえばDIV要素を使用する場合とは対照的に、テーブル内のすべてのコンテンツがレンダリングされるafterをレンダリングします。

0
YardenST