table元素和css display：table之间的区别是什么 [英] What is the difference between the table element and css display:table

问题描述

table元素和css显示表之间有区别。
当浏览器绘制时，哪个更快？

解决方案

是的，使用 < table> 并使用< div style =display：table> 。

$ b b

样式中的差异

每个元素都有自己的默认样式集。更改一个样式属性（在这种情况下， display ）不会更改其他属性，因此，如果要模拟真实表，则必须显式地。

div中的属性（带显示：表）

border-spacing 2px 0px

box-sizing border-box¹content-box

border-color＃808080²与currentColor相同

（with display：table-caption）

text-align center start

div中的属性（带显示：table-row-group）

- 对齐中间基线

border-color＃808080²与currentColor相同

code>属性in th in div（with display：table-cell）

font-weight 700 400

padding：1px 0px

text-align center start

vertical-align中间基线

属性td in div with display：table-cell）

padding：1px 0px

vertical-align中间基线

¹仅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} 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具有更多的属性。

表

border绘制开始边框，并在所有单元格周围插入边框

sortable启用表格的排序界面

colgroup

span由元素跨越的列

col

span元素所跨的列数

th

colspan单元格跨越的列数

rowspan单元格要跨越的行数

headers此单元格的标题单元格

标题单元格应用于

abbr用于标题单元格的替代标签

sorted column sort direction and ordinality

td

colspan单元格跨越的列数

rowspan单元格跨越的行数

headers此单元格的标题单元格

在表格中，元素 colgroup ， thead tbody ， tfoot ， tr ， th 和 td 有可选的结束标签。使用 div ，你没有这样的奢侈，你需要写出所有的结束标签。

此外， tbody 也有一个可选的开始标签。这意味着在标记中只有 tr 且没有 tbody 的元素将在DOM树中有一个tbody。 / p>

这可能看起来不重要，但在某些情况下，结果有微妙的差异。

鉴于上述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 =tdstyle =vertical-align：inherit> 1< / div> 
< div class =td> 1< br> 2< / div> 
< / div> 
< / div> 
  

实际表格中的表格单元格将垂直对齐到中间（因为它们继承自 tbody ），但不是在CSS表中，没有tbody可以继承。

JavaScript接口中的差异

表节点具有更多属性：

createCaption（）， deleteCaption（）， createTHead ， deleteTHead（）， createTFoot（）， deleteTFoot ）， createTBody（）， insertRow（）， deleteRow （）， caption ， tHead ， tFoot ， tBodies [] ， rows [] ， border ，框架，规则， code> width ， bgColor ， cellPadding ， cellSpacing ，希望自己说话。

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

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

解决方案

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.

这篇关于table元素和css display：table之间的区别是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！