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 width: 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，還有很多案例