IE8支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。
一、为什么不用table元素？
目前，在大多数开发环境中已经不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table元素呢？
用DIV+CSS编写出来的文件k数比用table写出来的要小。
table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。
非表格内容用table来装，不符合标签语义化要求，不利于SEO。
table的嵌套性太多，用DIV代码会比较简洁。
1、当设置display：table;时，table的padding设置会失效。
1 .table { 2 display: table; 3 margin: 5px; 4 1000px; 5 border:1px solid red; 6 7 }
2、当设置display：table-row;时，margin和padding设置会失效。这里我进行了设置，可以看出是没有效果的。
1 .row { 2 display: table-row; 3 padding:100px; 4 margin:100px; 5 }
3、当设置display：table-cell;时，margin设置会失效。这里我进行了设置，可以看出是没有效果的。
1 .cell { 2 display: table-cell; 3 padding: 10px; 4 vertical-align: middle;/*定义行内元素垂直对齐*/ 5 height: 300px; 6 border:1px solid green; 7 8 -webkit-box-sizing: border-box; 9 -moz-box-sizing: border-box; 10 box-sizing: border-box; 11 }
4、认识了上面的设置的作用和注意点以后，我们可以发现可以通过display:table-cell和vertical-align:middle;来进行垂直居中设置的,也是运用了cell时，vertical-align属性生效作用。
二、要是想要一个表格的布局方式怎么办？
可以用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>)此元素会作为一个表格标题来显示。
参考：https://blog.csdn.net/Doulvme/article/details/79015264，还有很多案例