实际表格Div表

Question

此

<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>

现在，这两者在性能和/或渲染速度方面是否存在差异，或者它们是否相同？

Answer 1

使用div模拟数据表在语义上是不正确的，并且通常与性能无关，因为呈现是即时的。瓶颈来自JavaScript或具有大量嵌套元素的极长页面，这些元素通常在过去是100个嵌套表格，用于创建布局。

使用表格来表达它们的含义，并使用表格来表达它们的含义。显示表行和单元属性将更多地利用div布局，然后为数据表示创建表。将它们视为与报纸或杂志中的布局列和行相同的布局列和行。

性能方面，你有几个字节与div示例，lol：）

Answer 2

首先，我不会担心性能，而是更多关于语义。如果是表格数据，请使用<table>。如果它只是表示布局元素的块元素，请使用<div>。

如果你真的非常担心性能，那么答案仍然取决于所使用的客户端。例如，已知MSIE在表格渲染中很慢。你应该至少在不同的浏览器中测试自己。

如果这种烦恼是由大数据引起的，那么我会考虑引入你要显示的数据的分页/过滤。

Answer 3

你真的不应该担心表格渲染的表现。即使有一个，在你要显示数百（数千？）个表之前，你也不会注意到它。使用你觉得更舒服的东西。

Answer 4

关于这一点有很多讨论，div表通常占据上风，因为它具有造型灵活性。 这是一个链接 - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Answer 5

在下载所有标记之前，不会呈现该表。虽然下载标记后将立即呈现各个div。我想总的时间会是一样的，但是div会给人一种更好的性能和更快的响应感。

Answer 6

我想提一下，如果你使用表结构而不是div，那么用户可以保存CMD（或Windows中的ALT）从表中选择某个数据区域进行复制。该数据也很容易粘贴到excel和其他类似的工作簿程序中。

Answer 7

在我看来，使用div的唯一原因是根据浏览器大小设置样式和调整布局。如果它没有坏掉，请不要修理它。使用CSS时，Div更容易设计风格。

表： 前景 - 您可以根据自己的需要获得非常复杂的布局。更可靠。 有时使用复杂的css样式，表格会变得有点怪异。不适合负责任的网站。

Divs：可以根据浏览器输入进行调整，更灵活，更容易设计。

答案 7 :(得分：1)

如果要呈现表格数据，那么您应该使用表格 - 它和相关元素具有表示数据表的所有必要语义。一堆乱七八糟的没有。

答案 8 :(得分：1)

在性能主题上投入我的两分钱。对于小型（例如100行以下）表，使用DIV在性能方面不会产生太大差异。

另一方面，如果要生成非常长的数据集，请务必使用传统的HTML表格。

简要说明：

这一切都来自我公司的项目，在那里我编写了一个Javascript类，根据SQL数据为程序生成表格（它是一种报告类型的模块）。无论如何，我喜欢DIV，所以我把它写成基于DIV的，就像OP的例子一样。

经过一些可怕的表现（特别是在IE8中），我决定只使用表格重新编写它，因为它总体上是非常简单的表格数据。无论出于何种原因，桌子在我的Chrome机器上的速度大约是我的机器的两倍。 Safari也是如此。

那就是说，既然我不能提供我的工作代码，我写了一些基准的东西，只是让你尝试或者方法论。你会发现它们几乎相同，只有一个使用带有样式的div来模仿表的标准行为，而另一个只是一个旧的学校表。

唯一真正的区别是生成的元素的类型，所以这是我在时间增量中唯一能够考虑的因素。我确定它因浏览器而异，但在我看来，表格元素只是更快。

<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>

Answer 8

如果要呈现表格数据，那么您应该使用表格 - 它和相关元素具有表示数据表的所有必要语义。一堆乱七八糟的没有。

Answer 9

在性能主题上投入我的两分钱。对于小型（例如100行以下）表，使用DIV在性能方面不会产生太大差异。

另一方面，如果要生成非常长的数据集，请务必使用传统的HTML表格。

简要说明：

这一切都来自我公司的项目，在那里我编写了一个Javascript类，根据SQL数据为程序生成表格（它是一种报告类型的模块）。无论如何，我喜欢DIV，所以我把它写成基于DIV的，就像OP的例子一样。

经过一些可怕的表现（特别是在IE8中），我决定只使用表格重新编写它，因为它总体上是非常简单的表格数据。无论出于何种原因，桌子在我的Chrome机器上的速度大约是我的机器的两倍。 Safari也是如此。

那就是说，既然我不能提供我的工作代码，我写了一些基准的东西，只是让你尝试或者方法论。你会发现它们几乎相同，只有一个使用带有样式的div来模仿表的标准行为，而另一个只是一个旧的学校表。

唯一真正的区别是生成的元素的类型，所以这是我在时间增量中唯一能够考虑的因素。我确定它因浏览器而异，但在我看来，表格元素只是更快。

<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>