一、為什么不用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的應用場景也是比較廣泛的，Google地圖在搜索路線時，左側的路線詳情就是用的display:table來實現的。
三、如何使用display:table？
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>模擬表格</title> </head> <body> <style type="text/css" rel="stylesheet"> .table { display: table; border: 1px solid #cccccc; margin: 5px; /*display: table時padding會失效*/ } .row { display: table-row; border: 1px solid #cccccc; /*display: table-row時margin、padding同時失效*/ } .cell { display: table-cell; border: 1px solid #cccccc; padding: 5px; /*display: table-cell時margin會失效*/ } </style> <div class="table"> <div class="row"> <div class="cell">張三</div> <div class="cell">李四</div> <div class="cell">王五</div> </div> <div class="row"> <div class="cell">張三</div> <div class="cell">李四</div> <div class="cell">王五</div> </div> </div> </body> </html>
由此，我們可以用display:table系列在做一些常用的布局設計
1、讓塊級標簽實現行內效果，即浮動至同一橫軸
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>display:table實現浮動效果</title> </head> <body> <style type="text/css" rel="stylesheet"> .table { display: table; margin: 5px; width: 1000px; } .row { display: table-row; } .cell { display: table-cell; padding: 10px; } </style> <div class="table"> <div class="row"> <div class="cell">內容內容內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> <div class="cell">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> <div class="cell">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </div> </div> </body> </html>
2、實現垂直居中
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>display:table實現垂直居中</title> </head> <body> <style type="text/css" rel="stylesheet"> .table { display: table; margin: 5px; width: 500px; height: 300px; background-color: #ccc; } .cell { display: table-cell; padding: 10px; vertical-align: middle;/*該屬性是定義行內元素垂直對齊的，只有行內元素會生效。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。*/
} </style> <div class="table"> <div class="cell">內容內容內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </div> </body> </html>
今天先這么多，以后發現有新的妙用繼續補充