html - tableの代わりにdisplay：tableを使用する必要があるのはなぜですか

Question

divを使用してサイトを構成し、display：tableプロパティ（display：tr、display：tr）を適用する利点は何ですか。これは、divがtrおよびtd要素とまったく同じように動作することを意味しませんか？

レイアウトにテーブルやテーブルの動作を使用するべきではないことはわかっていますが、違いと利点があるかどうかだけが気になりますか？

Answer 1

divを使用してサイトを構成し、display：tableプロパティ（display：tr、display：tr）を適用する利点は何ですか。

古いブラウザとの互換性を奪うことを除いて、私の意見では何もありません。display: table-*でDIVを使用する方が、sよりも何とか優れているという考え<table>はばかげたIMOであり、テーブル要素に対する完全に誤ったヒステリーの結果です。（@Nimoを攻撃するのではなく、「テーブルは悪」のミームをやりすぎた人を批判するだけです。）

表は、レイアウトに誤用されないように、表形式のデータを表すために使用されることになっています。

ただし、純粋なCSSを使用してシミュレートするのが非常に難しいテーブルの特定の機能があります。それらを機能させるには、大規模なハックが必要であり、場合によってはJavaScriptベースの回避策も必要です。

これらの機能に依存しない方法でレイアウトを設計する必要があります。

まれに、それらが必要になる場合があります。しかし、それなら、あなたが適切なものを使用する<table><tr>か、脳死したものを使用するかは問題ではありません<div style="display: table"><div style="display: table-row">（ちなみに、どちらがより意味的で読みやすいですか？）

レイアウトが必要 な場合display: table-*は、これらのまれなケースの1つが手元にあるか、とにかくコーナーで自分自身をペイントしました。いずれにせよ、を使用すると<table>、少なくとも一貫したブラウザサポートが得られます。

Answer 2

以下に、TABLE要素に対してDIVを使用する理由を説明します。

テーブル要素の長所：ほとんどの設計者は、一貫した外観のためにテーブルを使用します。テーブルのメンテナンスも簡単です。テーブルのもう1つの利点は、ほとんどのブラウザと互換性があることです。

テーブル要素の短所：これにはすべてコストがかかります。ネストされたテーブルが多すぎると、ページサイズとダウンロード時間が長くなります。より多くのテーブル要素が重要なコンテンツを押し下げるため、検索スパイダーが検索エンジンにコンテンツを追加する可能性は低くなります。

DIV要素の長所： CSSを使用したdivは、同じテーブルベースのページ構造を実現し、ページ上の要素の数を減らすことができるため、ページの読み込みが速くなります。また、ページを検索エンジンスパイダーとの互換性を高めます。

DIV要素の短所：これの主な欠点は、すべてのCSS要素がブラウザーと互換性があるわけではないことです。このため、問題を解決するためにカスタムCSSを作成する必要があります。

記事全文：http：//www.codeproject.com/KB/HTML/DIVwebsite.aspx

display：tableは、要素にテーブルとして表示するように指示します。ネストされた要素は、古き良きTRとTDを模倣して、テーブル行とテーブルセルとして表示する必要があります。表示もあります：table-columnですが、COLのようにスタイル情報を提供するだけで、何も表示されないはずです。これがどのように機能するのか正確にはわかりません。

div表示スタイルの詳細：http ：//www.quirksmode.org/css/display.html

Answer 3

表示：テーブル; divをテーブルに変換することを意味するのではなく、特定のプロパティ（vertical-alignなど）が通常は機能しない場所で機能するようにするだけです。レイアウトにテーブルを使用するようなものではありません。

Answer 4

表は、表形式のデータを表すためにのみ使用する必要があります。Divは、コンテンツをグループ化するためのコンテナです。そのような単純な。display: tableテーブルのレイアウトプロパティのみを提供します。ただし、<IE7とは互換性がないため、適切に劣化させるために、これは避けてください。