实际表与比较 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>
现在，这两者在性能和/或渲染速度方面有什么不同吗？或者它们是一样的？
使用div模拟数据表在语义上是不正确的，而且通常与渲染是即时性无关。 瓶颈来自JavaScript或超长的页面，embedded的元素很多，通常在过去的时间是100个嵌套的表格用于创build布局。
使用表格来expression他们的意思，以及div的意思。 显示表格行和单元格属性是利用div布局，然后创build表格来表示数据。 将它们看作与您在报纸或杂志上可以find的排列相同的排列。
性能明智，你有更多的字节与div的例子，lol 🙂
首先，我不会担心performance，但更多的是关于语义。 如果是表格数据，请使用<table> 。 如果它只是表示布局元素的块元素，请使用<div> 。
如果真的，真的担心performance，那么答案仍然取决于所使用的客户端。 例如，MSIE在桌面渲染方面速度慢。 你至less应该在不同的浏览器中testing自己。
如果这个问题是由大数据引起的，那么我会考虑引入你将要显示的数据的分页/过滤。
你真的不应该担心表格渲染的performance。 即使有一个，你将不会注意到，直到有数百（数千？）的表显示。 用你觉得更舒服的方式。
该表不会被呈现，直到其所有的标记已被下载。 虽然个人divs会在他们的标记被下载后立即被渲染。 我想总的时间是一样的，但是divs会给人一种更好的performance和更快的反应。
我想提到的是，如果使用表结构而不是div，则用户可以保存CMD（或者在窗口中selectALT）从表中select某个区域的数据进行复制。 该数据也很容易粘贴到Excel和其他类似的工作簿程序。
有很多关于这个的讨论，div表通常因为它的样式灵活性而占上风。 这里有一个链接 – http://css-discuss.incutio.com/wiki/Tables_Vs_Divs
在我看来，使用div的唯一原因是根据浏览器大小来devise和调整布局。 如果没有损坏，请不要修复。 Div使用css更容易。
表：优点 – 你可以得到一个非常复杂的布局，你想如何。 更可靠。 有时使用复杂的css样式有时会造成一些奇怪的问题。 不善于负责任的网站。
Divs：可以根据浏览器的input进行调整，更加灵活方便。
如果您正在呈现表格数据，那么您应该使用表格 – 它和相关的元素具有表示数据表的所有必要的语义。 混乱的divs没有。
只要投入我的两分钱的performance主题。 对于小型（例如100行以下）的表格，使用DIV并不会有明显的差异。
如果你想生成非常长的数据集，另一方面，你绝对应该使用传统的HTML表格。
简要说明：
这一切都是从我公司的项目中产生的，我写了一个Javascript类来根据SQL数据为程序生成表格（这是一种报告types的模块）。 无论如何，我喜欢DIV，所以我写它是基于DIV的，就像OP示例一样。
在一些可怕的performance之后（特别是在IE8中），我决定用表格重新编写它，因为它总体上是非常简单的表格数据。 无论出于何种原因，表格在我的计算机上的速度是Chrome的两倍。 Safari也是如此。
也就是说，由于我不能提供我的工作代码，所以我写了一个小小的基准东西，只是让你尝试一下或者采取一种方法。 你会发现它们几乎一模一样，只有一个使用div来模仿桌子的标准行为，另一个只是一个老式的桌子。
唯一真正的区别是正在生成的元素的types，所以这是我可以在时间三angular洲中考虑的唯一的事情。 我确定它通过浏览器是不同的，但在我看来，表格元素更快。
<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>
