<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS的新表格佈局方式</title>
<style type="text/css">
html,body{width:100%; height:100%;}
*{margin:0; padding:0;}
#wrap{display:table; border-collapse:collapse; width:70%; height:100%; margin:0 auto;}
#nav{display:table-cell; width:20%; pink;}
#extras{display:table-cell; width:30%; background:#C60;}
#content{display:table-cell; width:30%; background:#9FF;}
#comment{display:table-cell; width:20%; background:#FCC; color:#903; font-weight:bold;}
</style>
</head>
<body>
<div id="wrap">
<div id="nav">
<a href="#">首頁</a>
<a href="#">產品中心</a>
<a href="#">在線留言</a>
<a href="#">聯繫我們</a>
<a href="#">註冊用戶</a>
</div>
<div id="extras">
"display:table;"的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基於表格的CSS佈局，使我們能夠輕鬆定義一個單元格的邊界、背景等樣式，而不會產生因爲使用了table那樣的製表標籤所導致的語義化問題。
</div>
<div id="content">
這種基於表格的新CSS佈局方式能夠正確的在IE8、Firefox、Safari和Opera（譯者注：包括FF2/FF3/Google都通過了測試）中顯示出來。
當IE8發佈時，它將支持很多新的CSS display屬性值，包括與表格相關的屬性值：table、table-row和table-cell，它也是最後一款支持這些屬性值的主流瀏覽器。它標誌着複雜CSS佈局技術的結束，同時也給了HTML表格佈局致命一擊。最終，使用CSS佈局來製作出類似於table佈局的柵格將會變得十分迅速和簡單。
網頁元素應用上那些與表格相關的display屬性值後，能夠模仿出與表格相同的特性。我將會在該文中給大家演示這種方法給CSS佈局帶來的巨大影響。
</div>
<div id="comment">
"display:table;"的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基於表格的CSS佈局，使我們能夠輕鬆定義一個單元格的邊界、背景等樣式，而不會產生因爲使用了table那樣的製表標籤所導致的語義化問題<br />
父節點使用display:table屬性，子節點使用display:table-cell屬性。實現分欄等高的佈局。支持firefox,chrome,safari,opera,IE8。父節點可以不用設置display:table屬性，效果同樣有！！！
table-cell是分欄，table-row是分行!!!!
</div>
</div>
</body>
</html>"display:table;"的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基於表格的CSS佈局，使我們能夠輕鬆定義一個單元格的邊界、背景等樣式，而不會產生因爲使用了table那樣的製表標籤所導致的語義化問題。
父節點使用display:table屬性，子節點使用display:table-cell屬性。實現分欄等高的佈局。支持firefox,chrome,safari,opera,IE8。父節點可以不用設置display:table屬性，效果同樣有！！！
table-cell是分欄，table-row是分行!!!!
特別管用！！！
以上代碼產生的效果如下：
