當IE8發布時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值：table、table-row和table-cell，它也是最后一款支持這些屬性值的主流瀏覽器。它標志著復雜CSS布局技術的結束，同時也給了HTML表格布局致命一擊。最終，使用CSS布局來制作出類似于table布局的柵格將會變得十分迅速和簡單。
網頁元素應用上那些與表格相關的display屬性值后，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS布局帶來的巨大影響。?

使用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都通過了測試）中顯示出來。下面這張圖片是它在IE8中的樣子：?
?
我們輕松實現了三欄等高布局，而無需使用偽造背景圖片之類的技巧，更不用擔心定位和清除浮動的問題！

它是怎樣實現的？?
你可以給HTML元素指定與表格相關的display屬性值，使得它們像表格元素那樣渲染。以下是這些可用的display屬性值：?
table?
使該元素按table樣式渲染?
table-row?
使該元素按tr樣式渲染?
table-cell?
使該元素按td樣式渲染?
table-row-group?
使該元素按tbody樣式渲染?
table-header-group?
使該元素按thead樣式渲染?
table-footer-group?
使該元素按tfoot樣式渲染?
table-caption?
使該元素按caption樣式渲染?
table-column?
使該元素按col樣式渲染?
table-column-group?
使該元素按colgroup樣式渲染?
等等……難道用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樣例，而它們將表現出相同的視覺效果。?
?
首先，以下是能夠生成三列布局樣例的其中一份：?

復制代碼 代碼如下:
<div class="container">?
<div class="row">?
<div class="cell">CELL A</div>?
<div class="cell">CELL B</div>?
<div class="cell">CELL C</div>?
</div>?
</div>?

這份嵌套的div元素看起來不是那么讓人興奮，稍等一會，我們現在來做點什么。它的CSS樣式也非常簡單：

復制代碼 代碼如下:
.container {?
display: table;?
}?
.row {?
display: table-row;?
}?
.cell {?
display: table-cell;?
width: 100px;?
height: 100px;?
border: 1px solid blue;?
padding: 1em;?
}?

以上CSS給類名為container的元素定義了“display:table;”屬性，類名為row的元素定義了“display:table-row;”，類名為cell的元素定義了“display:table-cell;”，同樣還給它定義了邊框、高度和寬度值。?
以上HTML文檔明確地為三個單元格定義了包含它的表格和表格行，使用到了所有我們創建的CSS類名。然而，我們可以減少這些標簽，移除一行div元素試試：?

復制代碼 代碼如下:
<div class="row">?
<div class="cell">CELL A</div>?
<div class="cell">CELL B</div>?
<div class="cell">CELL C</div>?
</div>?

即使上面的代碼遺漏了聲明表格的那一行，瀏覽器仍將創建一個匿名的表格行。我們還可以移除更多的代碼：?

復制代碼 代碼如下:
<div class="cell">CELL A</div>?
<div class="cell">CELL B</div>?
<div class="cell">CELL C</div>?

以上代碼遺漏了聲明表格和表格行的代碼，瀏覽器同樣會創建出這些匿名的盒對象。即使缺少這些標簽元素，最終的效果仍然是一樣的。?

創建匿名表格元素的規則?
這些匿名的盒對象不是用魔術變出來的，它們也不會自動往你的HTML源碼中添加新的標簽。為了完全發揮出匿名表格元素的優勢，你最好能夠對創建它們的規則有所了解。如果布局中調用了匿名元素，瀏覽器將會根據需要創建一個匿名的盒對象并將它的CSS display屬性設置為table、table-row或table-cell中的一個。?
如果某個元素已經被設置為“display:table-cell;”，而它的父節點（包含它的容器）沒有被設置為“display:table-row;”屬性，那么瀏覽器將會創建一個被設置為“display:table-row;”的匿名盒對象來嵌套它。并且與之相鄰的屬性為“display: table-cell;”的兄弟節點也都會被這個匿名盒對象所包含，直到碰到一個沒有被設置為“display: table-cell;”的元素而結束這一行。以下是相關的代碼樣例：?

復制代碼 代碼如下:
<div class="cell">CELL A</div>?
<div class="cell">CELL B</div>?
<div class="cell">CELL C</div>?
<div>Not a cell</div>?

上面的三個類名為“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中的所有元素。?
請看以下代碼：?

復制代碼 代碼如下:
<div class="row">ROW A</div>?
<div class="row">ROW B</div>?
<div>Not a row</div>?

上面兩排類名為“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
table是上下等寬的表格，表示上下兩行數據一致，若兩行查詢條件數量相差較大，不如設置兩個table進行調節。
td 寬度：為同列寬度最大的td的寬度td高度：為同行高度最大的td的高度
同時，td寬度指定后，若其內的控件寬度大于td寬度，則以控件寬度為準。即td寬度以上下，內外最大的為準。
同：若td內的數據長度大于td寬度時，td寬度為數據寬度，造成變化。

?

?

將table-layout屬性設置為fixed可以讓瀏覽器按照固定算法來渲染單元格的寬度。這在固定寬度布局中非常有用，例如我們最上面的那段布局代碼。?
Border-collapse?
和普通的HTML表格一樣，你可以使用border-collapse屬性來定義你的table布局元素之間使用何種形式的邊框，是共用邊框（賦值為collapse）還是使用各自獨立的邊框（賦值為separate）。?
Border-spacing?
如果你聲明了“border-collapse:separate;”，那么你就可以使用border-spacing屬性來定義相鄰兩個單元格邊框間的距離。?

制作完美的柵格?
制作等高柵格對于傳統CSS布局技術來說已經成為一個難題，然而使用合適的CSS表格則很容易實現。例如，如果我們想制作一個包含圖片和標題的影像圖庫柵格（如下圖），使用CSS表格很快就能搞定。?
?
以下是我們這個影像圖庫的代碼：?

復制代碼 代碼如下:
<div class="grid">?
<div class="row">?
<div class="image"><img src="images/photo1.jpg" alt="A Lily" />?
A lily in the gardens of The Vyne Country House</div>?
<div class="image"><img src="images/photo3.jpg" alt="A Fuchsia plant" />?
Fuchsia plant in my garden</div>?
</div>?
<div class="row">?
<div class="image"><img src="images/photo2.jpg" alt="A crazy looking Allium flower" />?
A crazy looking flower</div>?
<div class="image"><img src="images/photo4.jpg" alt="A Robin sitting on a fence" />?
This robin has been visiting our garden over the summer.?
He is very friendly and doesn't seem to be too worried about sharing the garden with us.</div>?
</div>?
</div>?

每張圖片被一個img標簽引用，它的標題包含在P元素中，它們均被包含在一個類名為“image”的div元素中。同一行的div被一個類名為“row”的div元素包含，整個影像圖庫被一個類名為“grid”的div元素包含。?
實現這個布局的CSS代碼十分簡單：?

復制代碼 代碼如下:
.grid {?
display: table;?
border-spacing: 4px;?
}?
.row {?
display: table-row;?
}?
.image {?
display: table-cell;?
width: 240px;?
background-color: #000;?
border: 8px solid #000;?
vertical-align: top;?
text-align: center;?
}?
.image p {?
color: #fff;?
font-size: 85%;?
text-align: left;?
padding-top: 8px;?
}?

以上CSS代碼簡明易懂，可能你還注意到了我們是怎樣通過border-spacing屬性來控制單元格圖像之間的距離的。制作一張柵格布局變得再簡單不過了，同時我們還可以避免那些使用float元素實現等高布局所帶來的麻煩。?

將理論運用于實戰?
本文展示了CSS display屬性中表格相關屬性值的基礎用法，開發者不斷努力通過CSS來實現可靠的基礎柵格布局，而這種方法最終會使其變得更簡單。我們已經對CSS表格布局做了一個簡明易懂的介紹，研究了display屬性中各種表格相關的屬性值，找出了匿名表格元素的本質，另外還發現了一些其它有用的CSS表格屬性。?
接下來的一步就看你了，你已經了解到使用CSS表格制作柵格布局的潛力，帶著好奇心去自己嘗試下吧！運用從本文學到的知識，你可以開始實踐你自己的CSS表格布局并發明一些新的技術。

?

轉載于:https://www.cnblogs.com/mguo/p/3414118.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的与table有关的布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。