一、為什么不用table系表格元素？
目前，在大多數開發環境中，已經基本不用table元素來做網頁布局了，取而代之的是div+css，那么為什么不用table系表格元素呢？
1、用DIV+CSS編寫出來的文件k數比用table寫出來的要小，不信你在頁面中放1000個table和1000個div比比看哪個文件大
2、table必須在頁面完全加載后才顯示，沒有加載完畢前，table為一片空白，也就是說，需要頁面完畢才顯示，而div是逐行顯示，不需要頁面完全加載完畢，就可以一邊加載一邊顯示
3、非表格內容用table來裝，不符合標簽語義化要求，不利於SEO
4、table的嵌套性太多，用DIV代碼會比較簡潔
二、但我想要一個表格的布局方式怎么辦？
好處很多，但是有的項目中又需要類似表格的布局怎么辦呢？可以用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）等高布局