Html 实际表 Vs。div表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2617895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Actual table Vs. Div table
提问by Ben
This
这个
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
Can be done with this:
可以这样做：
<div>
<div style="display: table-row;">
<div style="display: table-cell;">Hello</div>
<div style="display: table-cell;">World</div>
</div>
</div>
Now, is there any difference between these two in terms of performance and/or render speed or they're just the same?
现在，这两者在性能和/或渲染速度方面有什么区别，或者它们完全相同？
采纳答案by Ivo Sabev
It is semantically incorrect to simulate data tables with divs and in general irrelevant to performance as rendering is instant. The bottle neck comes from JavaScript or extremely long pages with a lot of nested elements which usually in the old days is 100 nested tables for creating layouts.
用 div 模拟数据表在语义上是不正确的，并且通常与性能无关，因为渲染是即时的。瓶颈来自 JavaScript 或带有大量嵌套元素的超长页面，过去通常是 100 个嵌套表用于创建布局。
Use tables for what they are meant to and div's for what they are meant to. The display table-row and cell properties are to utilize div layouts more then creating tables for data representations. Look at them as a layout columns and rows same as those you can find in a newspaper or a magazine.
使用表格表示它们的含义，使用 div 表示它们的含义。显示表格行和单元格属性更多地利用 div 布局，而不是为数据表示创建表格。将它们视为与报纸或杂志中相同的布局列和行。
Performance wise you have couple of more bytes with the div example, lol :)
性能方面，您在 div 示例中有更多字节，大声笑 :)
回答by BalusC
In first instance, I wouldn't worry about performance, but more about semantics. If it's tabular data, use a <table>. If it are just block elements representing a layout element, use <div>.
首先，我不会担心性能，但更多的是关于语义。如果是表格数据，请使用<table>. 如果它只是表示布局元素的块元素，请使用<div>.
If you really, really worry about performance, then the answer would still depend on the client used. MSIE for example is known to be slow in table rendering. You should at least test yourself in different browsers.
如果您真的非常担心性能，那么答案仍然取决于所使用的客户端。例如，众所周知，MSIE 的表格渲染速度很慢。您至少应该在不同的浏览器中测试自己。
If this worriness is caused by large data, then I'd consider to introduce paging/filtering of the data you're about to show.
如果这种担忧是由大数据引起的，那么我会考虑对您将要显示的数据进行分页/过滤。
回答by mingos
You really shouldn't worry about performances in table rendering. Even if there is one, you won't notice it until there are hundreds (thousands?) of tables to display. Use what you feel is more comfortable for you.
你真的不应该担心表格渲染的表现。即使有一个，你也不会注意到它，直到有数百（数千？）个表要显示。使用你觉得更舒服的东西。
回答by Hanseh
There are many discussions about this and div table usually gets the upper hand because of its flexibility in styling. Here's one link - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs
关于这个有很多讨论，div 表通常占上风，因为它在样式上具有灵活性。这是一个链接 - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs
回答by deweydb
I wanted to mention that if you use a table structure instead of div than users can hold CMD (or ALT in windows) to select a certain area of data from the table to copy. That data also pastes very easily into excel and other similar workbook programs.
我想提一下，如果您使用表结构而不是 div，那么用户可以按住 CMD（或 Windows 中的 ALT）来从表中选择要复制的特定数据区域。这些数据也很容易粘贴到 excel 和其他类似的工作簿程序中。
回答by Midhat
The table wont be rendered until all its markup has been downloaded. While the individual divs will be rendered as soon as their markup is downloaded. I guess the total time will be the same, but the divs will give a perception of better performance and more responsiveness.
在下载所有标记之前，不会呈现该表。而单个 div 将在其标记下载后立即呈现。我想总时间将是相同的，但 div 会提供更好的性能和更快的响应能力。
回答by Bodhi1
In my opinion, the only reason to use divs are for styling and adjusting the layout based on browser size. If it isn't broke, don't fix it. Divs are easier to style though with css.
在我看来，使用 div 的唯一原因是根据浏览器大小设置样式和调整布局。如果它没有坏，就不要修理它。尽管使用 css，但 Div 更容易设计样式。
Tables: pros- you can get a very complicated layout exactly how you want it. More reliable. cons- tables get a little weird sometimes with complicated css styling. not good for responsible websites.
表格：优点-您可以完全按照自己的意愿获得非常复杂的布局。更可靠。cons-tables 有时会因为复杂的 css 样式而变得有点奇怪。不适合负责任的网站。
Divs: can adjust based on browser input, more flexible and easier to style.
Divs：可以根据浏览器输入进行调整，更灵活，更容易设置样式。
回答by Dan H
Just throwing in my two cents on the topic of performance. For small (under 100 rows, for example) tables, using DIVs wouldn't make much of a difference performance wise.
只是在性能主题上投入我的两分钱。对于小型（例如，少于 100 行）表，使用 DIV 不会对性能产生太大影响。
If you want to generate very long datasets, on the other hand, you hands down absolutely should use traditional HTML tables.
另一方面，如果你想生成很长的数据集，你绝对应该使用传统的 HTML 表格。
Brief Explanation:
简要说明：
This all spawned from my company's project, where I wrote a Javascript class to procedurally generate tables for me based on SQL data (it's a reporting kind of module). Anyway, I like DIVs so I wrote it to be DIV-based, much like the OP example.
这一切都源于我公司的项目，在那里我编写了一个 Javascript 类来根据 SQL 数据（它是一种报告类型的模块）为我按程序生成表。无论如何，我喜欢 DIV，所以我将其编写为基于 DIV，就像 OP 示例一样。
After some horrendous performance (in IE8 particularly), I decided to re-write it using just tables since it's pretty simple tabular data, overall. Tables are, for whatever reason, about twice as fast on my machine in Chrome. The same is true for Safari.
在经历了一些糟糕的表现之后（尤其是在 IE8 中），我决定只使用表格重新编写它，因为总体而言它是非常简单的表格数据。无论出于何种原因，在我的 Chrome 机器上，表格的速度大约是其两倍。Safari 也是如此。
That said, since I can't provide my work's code, I wrote a little benchmark thinggy that just let's you try either or methodology out. You'll see they're nearly identical, just one uses divs with styling to mimic the standard behavior of a table, and the other is just an old school table.
也就是说，因为我无法提供我的工作代码，所以我写了一个小基准测试，让你尝试或方法论。你会看到它们几乎完全相同，只有一个使用带有样式的 div 来模仿桌子的标准行为，另一个只是一张老式的桌子。
The only real difference is the type of element being generated, so that's about the only thing I can account for in the time delta. I'm sure it varies by browser, but it seems to me that table elements are just faster.
唯一真正的区别是生成的元素类型，所以这是我在时间增量中唯一可以考虑的事情。我确定它因浏览器而异，但在我看来，表格元素更快。
<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>
回答by Grant Palin
If you are presenting tabular data, then you should use a table - it, and the related elements, have all the necessary semantics to represent a table of data. A mess of divs has none.
如果您要呈现表格数据，那么您应该使用表格 - 它和相关元素具有表示数据表格的所有必要语义。一堆 div 没有。
