table元素和CSSdisplay:table有什么区别
What is the difference between the table element and CSS display:table
table元素和CSS显示table有区别吗？
用浏览器绘制哪个更快？
是的，使用 <table> 和使用 <div style="display:table"> 是有区别的。
样式上的差异
每个元素都有自己的默认样式集。更改一种样式 属性（在本例中为 display）不会更改其他属性，因此如果您想模拟真实的 table，则必须显式地添加这些属性。
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 的样式表至少需要包含以下内容：
.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;}
属性差异
Table 元素比普通 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
标记差异
在table秒内，元素colgroup、thead、tbody、tfoot、tr、th和 td 有可选的结束标签。使用 div，您就没有这样的奢侈了，您将需要完整地写出所有结束标记。
此外，tbody 还有一个可选的开始标记。这意味着标记中只有 tr 而没有 tbody 元素的 table 将在 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>
实际 table 中的 table 单元格将垂直居中对齐（因为它们继承自 tbody），但 CSS table，这里没有tbody可以继承。在写 HTML.
时请记住这一点
JavaScript 界面的差异
Table节点有更多属性：
createCaption(), deleteCaption(), createTHead(), deleteTHead(), createTFoot(), deleteTFoot(), createTBody(), insertRow(), deleteRow(), caption, tHead, tFoot, tBodies[], rows[], border, frame, rules、summary、width、bgColor、cellPadding、cellSpacing，希望它们能说明问题。
就是这样。性能差异可以忽略不计。
table元素和CSS显示table有区别吗？ 用浏览器绘制哪个更快？
是的，使用 <table> 和使用 <div style="display:table"> 是有区别的。
样式上的差异
每个元素都有自己的默认样式集。更改一种样式 属性（在本例中为 display）不会更改其他属性，因此如果您想模拟真实的 table，则必须显式地添加这些属性。
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 的样式表至少需要包含以下内容：
.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;}
属性差异
Table 元素比普通 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
标记差异
在table秒内，元素colgroup、thead、tbody、tfoot、tr、th和 td 有可选的结束标签。使用 div，您就没有这样的奢侈了，您将需要完整地写出所有结束标记。
此外，tbody 还有一个可选的开始标记。这意味着标记中只有 tr 而没有 tbody 元素的 table 将在 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>
实际 table 中的 table 单元格将垂直居中对齐（因为它们继承自 tbody），但 CSS table，这里没有tbody可以继承。在写 HTML.
JavaScript 界面的差异
Table节点有更多属性：
createCaption(), deleteCaption(), createTHead(), deleteTHead(), createTFoot(), deleteTFoot(), createTBody(), insertRow(), deleteRow(), caption, tHead, tFoot, tBodies[], rows[], border, frame, rules、summary、width、bgColor、cellPadding、cellSpacing，希望它们能说明问题。
就是这样。性能差异可以忽略不计。