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）等高佈局