实际表格 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示例,大声笑:)

Answer 2

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

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

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

Answer 3

只是在性能这个话题上投入我的两分钱。对于小型表（例如 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 4

你真的不应该担心表格渲染的表现.即使有一个,在你要显示数百(数千？)个表之前,你也不会注意到它.使用您觉得更舒适的东西.

Answer 5

关于此的讨论很多，并且div表由于其样式的灵活性而通常占据上风。这是一个链接-http://css-discuss.incutio.com/wiki/Tables_Vs_Divs