实际表比。分区表

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>

现在，这两者在性能和/或渲染速度方面有什么区别，还是只是一样？

原文由 Ben 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

在性能方面，div 示例有几个字节，大声笑 :)

原文由 Ivo Sabev 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

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

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

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

原文由 BalusC 发布，翻译遵循 CC BY-SA 2.5 许可协议