web-dev-qa-db-ja.com

実際のテーブル対Divテーブル

この

<table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>

これでできます：

<div>
    <div style="display: table-row;">
        <div style="display: table-cell;">Hello</div>
        <div style="display: table-cell;">World</div>
    </div>
</div>

さて、パフォーマンスやレンダリング速度の点でこれら2つの間に違いはありますか、それともまったく同じですか？

cssperformancehtmlhtml-table
54
Ben

Divを使用してデータテーブルをシミュレートすることは意味的に正しくなく、レンダリングは即座に行われるため、一般にパフォーマンスとは無関係です。ボトルネックは、JavaScriptまたは非常に長いページに由来し、多くの場合、通常はレイアウトを作成するための100のネストされたテーブルであるネストされた要素が多数あります。

目的の表を使用し、目的のdivを使用します。表示テーブル行とセルプロパティは、データ表現用のテーブルを作成するよりもdivレイアウトを利用することです。新聞や雑誌で見られるものと同じレイアウトの列と行として見てください。

パフォーマンスの面では、divの例ではさらに2、3バイト増えています。

57
Ivo Sabev

最初の例では、パフォーマンスについては心配しませんが、セマンティクスについては心配しません。表形式のデータの場合は、<table>。レイアウト要素を表す単なるブロック要素である場合は、<div>。

パフォーマンスについて本当に本当に心配する場合、答えは使用するクライアントによって異なります。たとえば、MSIEはテーブルのレンダリングが遅いことが知られています。少なくとも、異なるブラウザで自分自身をテストする必要があります。

この心配が大量のデータによって引き起こされる場合、表示しようとしているデータのページング/フィルタリングを導入することを検討します。

13
BalusC

テーブルレンダリングのパフォーマンスについて実際に心配する必要はありません。たとえそれがあったとしても、表示するテーブルが数百（数千？）になるまで気付かないでしょう。自分にとって快適だと思うものを使用してください。

5
mingos

これについては多くの議論がありますが、スタイルが柔軟であるため、通常divテーブルが優位になります。ここに1つのリンクがあります- http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

5
Hanseh

Divの代わりにテーブル構造を使用する場合、ユーザーはCMD（またはWindowsではALT）を押して、テーブルからデータの特定の領域を選択してコピーできます。そのデータは、Excelやその他の同様のブックプログラムにも非常に簡単に貼り付けられます。

4
deweydb

すべてのマークアップがダウンロードされるまで、テーブルはレンダリングされません。個々のdivは、マークアップがダウンロードされるとすぐにレンダリングされます。合計時間は同じになると思いますが、divはパフォーマンスの向上と応答性の向上を実現します。

3
Midhat

私の意見では、divを使用する唯一の理由は、ブラウザのサイズに基づいてスタイルを設定し、レイアウトを調整することです。壊れていない場合は、修正しないでください。 DivはCSSを使用してもスタイル設定が簡単です。

表：長所-非常に複雑なレイアウトを希望どおりに取得できます。より信頼できる。複雑なCSSスタイルを使用すると、cons-tableが少し奇妙になります。責任あるウェブサイトには向いていません。

Divs：ブラウザの入力に基づいて調整でき、より柔軟でスタイル設定が簡単です。

2
Bodhi1

表形式のデータを表示する場合は、テーブルを使用する必要があります。テーブルと関連する要素には、データのテーブルを表すために必要なすべてのセマンティクスがあります。多数のdivには何もありません。

1
Grant Palin

パフォーマンスのトピックに2セントを投入するだけです。小さなテーブル（たとえば、100行未満）の場合、DIVを使用してもパフォーマンスに大きな違いはありません。

一方、非常に長いデータセットを生成する場合は、伝統的なHTMLテーブルを絶対に使用する必要があります。

簡単な説明：

これはすべて、私の会社のプロジェクトから生まれました。そこでは、SQLデータに基づいて手続き的にテーブルを生成するJavascriptクラスを作成しました（レポートの一種のモジュールです）。とにかく、私はDIVが好きなので、OPの例のようにDIVベースになるように書きました。

恐ろしいパフォーマンス（特にIE8）の後、全体としては非常に単純な表データであるため、テーブルのみを使用して書き直すことにしました。何らかの理由で、Chromeのマシンではテーブルは約2倍高速です。同じことがSafariにも当てはまります。

とは言うものの、私は自分の作品のコードを提供することはできないので、どちらかまたは方法論を試してみようとするちょっとしたベンチマークを作成しました。それらはほとんど同じであることがわかります。1つだけがスタイルのdivを使用してテーブルの標準的な動作を模倣し、もう1つは古い学校のテーブルです。

唯一の本当の違いは、生成される要素のタイプです。したがって、それは時間差で説明できる唯一のものです。ブラウザーごとに異なると思いますが、テーブル要素のほうが速いようです。

<script type="text/javascript">
var time_start = new Date().getTime();
var NUM_ROWS = 5000;
var NUM_CELLS = 8;
var OLD_STYLE = 1; // toggle 0/1, true/false
if(OLD_STYLE)
{
    var table = document.createElement('table');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
         var row = document.createElement('tr');
         for(var b = 0; b < NUM_CELLS; b++)
         {
             var cell = document.createElement('td');
             cell.innerHTML = 'cell';
             row.appendChild(cell);
         }
         table.appendChild(row);
     }
}
else
{
    var table = document.createElement('div');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
        var row = document.createElement('div');
        row.setAttribute('style','display: table-row; padding: 2px;')
        for(var b = 0; b < NUM_CELLS; b++)
        {
            var cell = document.createElement('div');
            cell.setAttribute('style','display: table-cell; padding: 2px');
            cell.innerHTML = 'cell';
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}
var dt = (new Date().getTime() - time_start)/1000;
console.log( dt + ' seconds' );
</script>
1
Dan H