问题
Is there a difference between table element and CSS display table. Which is faster when draw by browser?
回答1:
Yes, there are differences between using <table> and using <div style="display:table">.
Differences in styling
Every element has its own default set of styles. Changing one style property (in this case, display) doesn't change the other properties, so you'll have to put those in explicitly if you want to emulate a real 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 only
² Chrome only
So a stylesheet for a proper CSS table needs to contain at least the following:
.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;}
Differences in attributes
Table elements have more attributes than plain divs.
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
Differences in markup
In tables, the elements colgroup, thead, tbody, tfoot, tr, th and td have optional end tags. With div, you have no such luxury and you will need to write out all end tags in full.
In addition, tbody also has an optional start tag. That means a table with only tr and no tbody elements in the markup will have a tbody in the DOM tree.
This may not seem to matter much, but there are subtle differences in the results under some circumstances.
Given the above CSS and the following markup
<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>
the table cells in the actual table will be vertically aligned to the middle (because they inherit from the tbody), but not in the CSS table, where there is no tbody to inherit from. Keep that in mind when writing your HTML.
Differences in the JavaScript interface
Table nodes have more properties:createCaption(), deleteCaption(), createTHead(), deleteTHead(), createTFoot(), deleteTFoot(), createTBody(), insertRow(), deleteRow(), caption, tHead, tFoot, tBodies[], rows[], border, frame, rules, summary, width, bgColor, cellPadding, cellSpacing which, hopefully, speak for themselves.
That's about it. Differences in performance are negligible.
来源：https://stackoverflow.com/questions/33080430/what-is-the-difference-between-the-table-element-and-css-displaytable