What is the difference between the table element and CSS display:table

Question

Is there a difference between table element and CSS display table. Which is faster when draw by browser?

Answer 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.