table元素和CSS显示有什么区别：table

Question

table元素和CSS显示表之间是否有区别。 浏览器绘制哪个更快？

Answer 1

是的，使用<table>和使用<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  

¹莫扎拉只有 ²仅限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()，{{ 1}}，deleteRow()，caption，tHead，tFoot，tBodies[]，rows[]，border，{{1} }，frame，rules，summary，width，bgColor，希望能为自己说话。

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