实际表比。格表

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布局，然后为数据表示创建表格。将它们看作与您可以在报纸或杂志中找到的相同的布局列和行。

性能方面你有几个与DIV例如多个字节，哈哈:)

Answer 2

该表不会被渲染，直到其所有的标记已被下载。虽然个人divs会在他们的标记被下载后立即呈现。我想总的时间会是一样的，但分区会给人一种更好的表现和更快的响应感。

Answer 3

你真的不应该担心表格渲染的性能。即使有一个，直到有数百（数千？）个表才能显示，您将不会注意到它。使用你觉得更舒适的东西。

Answer 4

有很多关于这个的讨论和div表通常会占据上风，因为它的样式灵活性。 这里有一个链接 - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Answer 5

在第一个例子中，我不会担心表现，但更多关于语义。如果是表格数据，请使用<table>。如果它只是表示布局元素的块元素，请使用<div>。

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

如果这种担心是由大数据引起的，那么我会考虑引入您即将显示的数据的分页/过滤。

Answer 6

如果您展示表格数据，那么你应该使用一个表 - 它和相关的元素，拥有所有必要的语义代表数据表。一团糟都没有。

Answer 7

我想提一提，如果你使用一个表结构，而不是股利不是用户可容纳CMD（或Windows ALT）从表中选择数据的某个区域进行复制。这些数据也很容易粘贴到Excel和其他类似的工作簿程序中。

Answer 8

只是在我的表现题目扔两美分。对于小型（例如100行以下）的表格，使用DIV不会在性能方面产生太大的差异。

如果要生成很长的数据集，在另一方面，你倒手绝对应该使用传统的HTML表格。

简要说明：

这一切都从我公司的项目中，我写了一个Javascript类以程序上生成基于SQL的数据（这是一个报告各种模块），我的表催生。无论如何，我喜欢DIV，所以我写它是基于DIV的，就像OP示例一样。

经过一些可怕的表现后（特别是在IE8中），我决定使用表格重新编写它，因为它总体上是非常简单的表格数据。无论出于何种原因，表格都是Chrome中我的计算机上的两倍。 Safari也是如此。这就是说，由于我无法提供我的工作代码，所以我写了一个小小的基准测试工具，让您可以尝试其中一种方法。你会发现他们几乎完全相同，只有一个人用造型来模仿桌子的标准行为，而另一个只是一张老式的桌子。

唯一真正的区别是正在生成的元素的类型，所以这是我可以在时间增量中解释的唯一的事情。我确定它会因浏览器而异，但在我看来，表格元素更快。

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

在我看来，使用div的是造型以及基于浏览器的大小布局的唯一原因。如果没有损坏，请不要修复它。尽管使用CSS，但Div比较容易。

表： 优点 - 你可以得到一个非常复杂的布局，你想如何。更可靠。 有时使用复杂的css样式会使情况变得有点奇怪。对负责任的网站不利。

Divs：可以根据浏览器输入进行调整，更灵活，更方便。