css Table布局：基于display:table的CSS布局
兩種類型的表格布局
你有兩種方式使用表格布局?-HTML Table（<table>標簽）和CSS Table（display:table?等相關屬性）。
HTML Table是指使用原生的<table>標簽，而CSS Table是指用CSS屬性模仿HTML 表格的模型。
在W3C關于<table>相關標簽的文檔中我們可以找到，HTML 4中<table>相關標簽的默認樣式表：
table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }顯而易見HTML Table使用標簽<table>、<tr>、<td>等標簽，就是使用CSS Table的相關屬性來實現的。從上面HTML4的默認樣式表中可以看出他們的使用對于CSS屬性的情況：
- table：指定對象作為塊元素級的表格。類同于html標簽<table>（CSS2）
- inline-table：指定對象作為內聯元素級的表格。類同于html標簽<table>（CSS2）
- table-caption：指定對象作為表格標題。類同于html標簽<caption>（CSS2）
- table-cell：指定對象作為表格單元格。類同于html標簽<td>（CSS2）
- table-row：指定對象作為表格行。類同于html標簽<tr>（CSS2）
- table-row-group：指定對象作為表格行組。類同于html標簽<tbody>（CSS2）
- table-column：指定對象作為表格列。類同于html標簽<col>（CSS2）
- table-column-group：指定對象作為表格列組顯示。類同于html標簽<colgroup>（CSS2）
- table-header-group：指定對象作為表格標題組。類同于html標簽<thead>（CSS2）
- table-footer-group：指定對象作為表格腳注組。類同于html標簽<tfoot>（CSS2）
一個關鍵的區別
作為從《CSS禪意花園》中學習CSS的個人，我討厭HTML Table布局。我不知不覺的產生了“虛幻的相關偏見”，高估HTML Table和CSS Table之間的區別。
如果它看起來、工作起來、聽起來像一個表格，那么它必須是一個表格？ 錯誤！
事實上，HTML Table和CSS Table之間的真正區別是：適當地調整CSS屬性，CSS的Table能做到許多HTML Table 不能做的事情，可以從Table中擇優選擇屬性使用。
使用CSS表格
CSS表格能夠解決所有那些我們在使用絕對定位和浮動定位進行多列布局時所遇到的問題。例如，“display:table;”的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。
使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產生因為使用了table那樣的制表標簽所導致的語義化問題。
在深入了解這種方法之前，讓我們先來寫份HTML文檔實例：
<div id="wrapper"><div id="main"><div id="nav">navigation column content…</div><div id="extras">news headlines column content…</div><div id="content">main article content…</div></div> </div>這份HTML源代碼滿足了內容呈現方面的要求。先是導航欄，然后是附加欄，最后是內容欄。我們同樣需要將以下CSS樣式應用上去：
#main {display: table;border-collapse: collapse; } #nav {display: table-cell;width: 180px;background-color: #e7dbcd; } #extras {display: table-cell;width: 180px;padding-left: 10px;border-right: 1px dotted #d7ad7b; } #content {display: table-cell;width: 380px;padding-left: 10px; }這種基于表格的新CSS布局方式能夠正確的在IE8、Firefox、Safari和Opera（譯者注：包括FF2/FF3/Google都通過了測試）中顯示出來。我們輕松實現了三欄等高布局，而無需使用偽造背景圖片之類的技巧，更不用擔心定位和清除浮動的問題！
它是怎樣實現的？
你可以給HTML元素指定與表格相關的display屬性值，使得它們像表格元素那樣渲染。以下是這些可用的display屬性值：
table難道用table布局不是錯的嗎？
可能你會對我們上面給出的布局實例有點不爽——畢竟，正如我自己也是一名WEB標準化的擁護者，我們不都一直堅持不應該使用table來進行布局嗎？
table元素在HTML當中是一個包含語義的標簽：它描述什么是數據。因此，你只能用它來標記那些需要制表的數據，例如一張財務信息表。如果數據能夠以電子表格的形式保存在你的電腦中，那它在HTML文檔中很可能需要用到table標簽進行標記。從另一方面來看，display的table屬性值只是聲明了某些元素在瀏覽器中的樣式——它不包含語義。如果使用table元素來進行布局，它將會告訴客戶端：這些數據是制表的。使用一些display屬性被設置為table和table-cell之類的div標簽，除了告訴客戶端以某種特定的樣式來渲染它們以外，不會告訴客戶端任何語義，只要客戶端能夠支持這些屬性值。
當然，我們同樣還要注意，當我們真的需要制表數據的時候不要使用一大堆被聲明為display:table;的div元素。
我們上面的那個例子是一個簡單的單行三列布局，無需費盡心思，我們就能夠使用這種技術輕松實現復雜的柵格布局。
匿名表格元素
CSS表格除了包含table布局的普通規則之外，同時還有著CSS table布局的超強特性：缺少的表格元素會被瀏覽器以匿名方式創建。CSS2.1規范中寫道：
CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時，那些“丟失”的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table-cell的三層嵌套關系。
這段話的意思是，如果我們為元素使用“display:table-cell;”屬性，而不將其父容器設置為“display:table-row;”屬性，瀏覽器會默認創建出一個表格行，就好像文檔中真的存在一個被聲明的表格行一樣。
創建匿名表格元素的規則
這些匿名的盒對象不是用魔術變出來的，它們也不會自動往你的HTML源碼中添加新的標簽。為了完全發揮出匿名表格元素的優勢，你最好能夠對創建它們的規則有所了解。如果布局中調用了匿名元素，瀏覽器將會根據需要創建一個匿名的盒對象并將它的CSS display屬性設置為table、table-row或table-cell中的一個。
如果某個元素已經被設置為“display:table-cell;”，而它的父節點（包含它的容器）沒有被設置為“display:table-row;”屬性，那么瀏覽器將會創建一個被設置為“display:table-row;”的匿名盒對象來嵌套它。并且與之相鄰的屬性為“display: table-cell;”的兄弟節點也都會被這個匿名盒對象所包含，直到碰到一個沒有被設置為“display: table-cell;”的元素而結束這一行。以下是相關的代碼樣例：
上面的三個類名為“cell”的div元素均被設置為“display:table-cell;”，它們將會像一個單行表格的三個單元格一樣并列排布。最后一個div元素則不會被包含在這一表格行當中，因為它沒有被設置成“display:table-cell;”。
如果某個元素被設置為“display:table-row;”，而它的父節點沒有被設置為“display:table;”（或者“display:table-row-group;”），瀏覽器將會創建一個被設置為“display:table;”的匿名盒對象來嵌套它，與之相鄰的屬性為“display: table-row;”的兄弟節點也都會被包含其中。同樣，如果某個元素被設置為“display:table-row;”，但它的內部卻缺少“display:table-cell;”的元素，那么一個匿名的table-cell將會被創建，用來包含該table-row中的所有元素。請看以下代碼：
上面兩排類名為“row”的div元素被設置了“display:table-row;”屬性，它們將會像單列表格中的兩行一樣依次排列。最后一個div元素則不會包含在這個匿名的table中。
以此類推，如果某個元素的display屬性值被設置為與表格相關的值，如table-row-group、table-header-group、 table-footer-group、table-column、table-column-group以及table-caption，但同時又沒有一個被設置為“display:table;”的父元素，那么一個匿名的盒對象將會被創建用來包含該元素和它的某些兄弟節點。
其他有用的表格屬性
當使用CSS表格時，因為這些元素遵從table布局的普通規則，所以你還可以給它們應用其它表格相關的CSS屬性。下面是一些派得上用場的屬性：
table-layout制作完美的柵格
制作等高柵格對于傳統CSS布局技術來說已經成為一個難題，然而使用合適的CSS表格則很容易實現。例如，如果我們想制作一個包含圖片和標題的影像圖庫柵格（如下圖），使用CSS表格很快就能搞定。
以下是我們這個影像圖庫的代碼：每張圖片被一個img標簽引用，它的標題包含在P元素中，它們均被包含在一個類名為“image”的div元素中。同一行的div被一個類名為“row”的div元素包含，整個影像圖庫被一個類名為“grid”的div元素包含。
實現這個布局的CSS代碼十分簡單：
效果圖：
當然，這個我采用的是vertical-align:middle;你如果采用top對齊，那么圖片就是完全一致對齊啦。
?
轉載于:https://www.cnblogs.com/goloving/p/7678291.html
總結
以上是生活随笔為你收集整理的css Table布局：基于display:table的CSS布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python基础第六天——函数的使用、函
- 下一篇： 〖Python〗-- 性能相关及深度优先