2

私の他の質問では、divテーブルのセル間隔は、テーブルがdivテーブルよりも優れていると述べ、divテーブルがhtmlテーブルよりも優れているとは言えませんでした。私は混乱しています、なぜdisplay: table紹介されたのですか、そしてそれがひどい場合のポイントは何ですか？

4

4 に答える 4

5

表示テーブルは、セルの間隔と拡大に関して特定の動作をします。この動作を他の手段で再現することは困難です。ただし、 HTML要素は表形式のデータ<table>にのみ使用する必要があります（Excelスプレッドシートを考えてみてください）。つまり、1つは表示動作であり、もう1つはセマンティック（意味のある）マークアップです。どちらか一方をもう一方なしで使用することをお勧めします。そのため、これらは2つの異なるものです。

表形式のデータがある場合は、を使用してマークアップし<table>、テーブルの表示動作を無料で取得します。実際には表形式のデータではないものがあり、それをテーブルの動作で表示したい場合は、CSSテーブルの表示動作を叩きます。

于 2013-03-01T23:04:46.430 に答える
3

特定の状況でテーブルまたはdivを使用する方がよいかどうかに関するその他の考慮事項に関係なく、display:tableCSSdisplay:table-rowはdisplay:table-cell任意のHTML（またはXML）を目的のレイアウトにレンダリングできると想定されているためです。スタイリング効果をブラウザにハードコーディングする必要はありません。

標準の、、、<table>など<tr>の<td>要素には、かなりの量のデフォルトのスタイルが適用されています。さまざまな点で他の要素とはまったく異なる動作をします。display:tableそれらの異なる動作を複製します。

したがって、最新のブラウザは、古いブラウザの場合のようにハードコードされたテーブル固有のレンダリングをエンジンに組み込む必要がなくdisplay:table、要素のデフォルトスタイルとして単純に使用できます。table

于 2013-03-03T21:54:45.383 に答える
0

つまり、HTMLマークアップ（<table>）はコンテンツの内容を記述し、CSS（display:table）はコンテンツの外観を記述します。それらは同じではありません。

テーブル以外の要素で使用できますがdisplay:table、実際のテーブルの表示プロパティを設定する場合は、これが唯一の適切な選択です。

簡単に理解できる例を次に示します。

<div class="my-tables">
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

.my-tables table {
    display:none; /* hide all the tables */
}

テーブルの1つ、たとえば最初のテーブルをどのように表示しますか？

.my-tables table:first-child {
    /* display:block; not quite... */
    display:table; /* There it is! */
}

表は、表形式のコンテンツをマークアップするための適切なツールです。レイアウト専用のテーブルは、それ以外の場合はタグの誤用です。<p>レイアウトにまたはを使用<fieldset>することも同様に間違っています。

于 2013-03-03T22:07:21.317 に答える
0

どちらを使用するかを選択するのは、レイアウトではなくデータにテーブルを使用することに基づいています。経験則として、実際にデータの「テーブル」を使用しようとしているときにテーブルを使用することをお勧めします。

于 2013-03-01T23:06:37.053 に答える