table元素和CSS display:table 有什么区别

Question

表格元素和 CSS 显示表格之间有区别吗？通过浏览器绘制时哪个更快？

Answer 1

是的， using<table>和 using之间存在差异<div style="display:table">。

造型上的差异

每个元素都有自己的默认样式集。更改一个样式属性（在本例中为display）不会更改其他属性，因此如果您想模拟真实表格，则必须明确地将它们放入。

Property in table in div (with display:table)  
border-spacing 2px 0px  
box-sizing border-box¹ content-box  
border-color #808080² same as currentColor  
Property in caption in div (with display:table-caption)  
text-align center start  
Property in tbody in div (with display:table-row-group)
vertical-align middle baseline  
border-color #808080² same as currentColor  
Property in th in div (with display:table-cell)  
font-weight 700 400  
padding: 1px 0px  
text-align center start  
vertical-align middle baseline  
Property in td in div (with display:table-cell)  
padding: 1px 0px  
vertical-align middle baseline  

¹ 仅限 Mozilla
² 仅限 Chrome

所以一个合适的 CSS 表的样式表至少需要包含以下内容：

.table {display:table; border-spacing:2px;}
.caption {display: table-caption; text-align:center;}
.colgroup {display:table-column-group}
.col {display:table-column}
.thead {display:table-header-group; vertical-align:middle;}
.tbody {display:table-row-group; vertical-align:middle;}
.tfoot {display:table-footer-group; vertical-align:middle;}
.tr {display:table-row;}
.th {display:table-cell; vertical-align:middle; padding:1px;
     text-align:center; font-weight:700;}
.td {display:table-cell; vertical-align:middle; padding:1px;}

属性差异

表格元素比普通 div 具有更多的属性。

table  
border Draws outset border, and inset borders around all cells 
sortable Enables a sorting interface for the table  
colgroup  
span Number of columns spanned by the element  
col  
span Number of columns spanned by the element  
th  
colspan Number of columns that the cell is to span  
rowspan Number of rows that the cell is to span  
headers The header cells for this cell  
scope Specifies which cells the header cell applies to  
abbr Alternative label to use for the header cell  
sorted Column sort direction and ordinality  
td  
colspan Number of columns that the cell is to span  
rowspan Number of rows that the cell is to span  
headers The header cells for this cell  

标记差异

在表格中，元素colgroup，thead，tbody，tfoot，tr，th并td具有可选的结束标记。使用div，您就没有这样的奢侈，您需要完整地写出所有结束标签。
此外，tbody还有一个可选的开始标签。这意味着标记中只有元素tr和没有tbody元素的表将在 DOM 树中具有 tbody。

这似乎无关紧要，但在某些情况下，结果存在细微差别。
鉴于上述 CSS 和以下标记

<table>
 <tr>
  <td style="vertical-align:inherit">1</td>
  <td>1<br>2</td>
 </tr>
</table>
<hr>
<div class="table">
 <div class="tr">
  <div class="td" style="vertical-align:inherit">1</div>
  <div class="td">1<br>2</div>
 </div>
</div>

实际表格中的表格单元格将垂直对齐到中间（因为它们继承自tbody），但不在 CSS 表格中，在那里没有 tbody 可以继承。在编写 HTML 时请记住这一点。

JavaScript 界面的差异

表节点有更多的属性：
createCaption()，deleteCaption()，createTHead()，deleteTHead()，createTFoot()，deleteTFoot()，createTBody()，insertRow()，deleteRow()，caption，tHead，tFoot，tBodies[]，rows[]，border，frame，rules，summary，width，bgColor，cellPadding，cellSpacing其中，希望为自己说话。

就是这样。性能差异可以忽略不计。