display:table与自己的table的区别

1、为何不用table系表格元素？

目前，在大多数开发环境中，已经基本不用table元素来作网页布局了，取而代之的是div+css，那么为何不用table系表格元素呢？

一、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪一个文件大

二、table必须在页面彻底加载后才显示，没有加载完毕前，table为一片空白，也就是说，须要页面完毕才显示，而div是逐行显示，不须要页面彻底加载完毕，就能够一边加载一边显示

三、非表格内容用table来装，不符合标签语义化要求，不利于SEO

四、table的嵌套性太多，用DIV代码会比较简洁

2、但我想要一个表格的布局方式怎么办？

好处不少，可是有的项目中又须要相似表格的布局怎么办呢？能够用display:table来解决

display:table系列几乎是和table系的元素相对应的，请看下表：

table	（相似 <table>）此元素会做为块级表格来显示，表格先后带有换行符。
inline-table	（相似 <table>）此元素会做为内联表格来显示，表格先后没有换行符。
table-row-group	（相似 <tbody>）此元素会做为一个或多个行的分组来显示。
table-header-group	（相似 <thead>）此元素会做为一个或多个行的分组来显示。
table-footer-group	（相似 <tfoot>）此元素会做为一个或多个行的分组来显示。
table-row	（相似 <tr>）此元素会做为一个表格行显示。
table-column-group	（相似 <colgroup>）此元素会做为一个或多个列的分组来显示。
table-column	（相似 <col>）此元素会做为一个单元格列显示。
table-cell	（相似 <td> 和 <th>）此元素会做为一个表格单元格显示。
table-caption	（相似 <caption>）此元素会做为一个表格标题显示。

“display:table;”的CSS声明可以让一个HTML元素和它的子节点像table元素同样。使用基于表格的CSS布局，使咱们可以轻松定义一个单元格的边界、背景等样式，而不会产生由于使用了table那样的制表标签所致使的语义化问题。

 

display:table能解决哪些问题？

（1）大小不固定的元素垂直居中

　　父元素设置：display:table; 子元素：display:table-cell; vertical-align:middle;

（2）两列自适应布局

（3）等高布局