你對DIV CSS布局中應用ul、li實現表格形式是否熟悉，表格類的數據，它有著得天獨厚的條件，也非常方便組織，這類數據內容直接使用表格就可以了，希望本文的介紹能讓你有所收獲。

DIV CSS布局中應用ul、li實現表格形式

或許你認為你的數據并不是表格式的數據，還有著其它的用法或你自己的見解，我們也可以用。我們看下面的效果：

　　我們首先分析一下如何制作：li是固定的寬度與高度（單元格），設置li在ul中浮動，當ul不夠寬的時候，li就會自動另起一行排列（一行有多少列通過計算即可得到ul的寬度，如一行四列，一列寬100px，那ul寬就是400px加上一定的邊距）。這樣就實現了類似于表格的效果，或者說我們用UL+LI模擬了表格的效果。我們開始HTML代碼的編寫：

引用：

<ulidulid="biaoge"> 
<liclassliclass="biaotou">第一列</li> 
<liclassliclass="biaotou">第二列</li> 
<liclassliclass="biaotou">第三列</li> 
<liclassliclass="biaotou">第四列</li> 
<li>數據1-1</li> 
<li>數據1-2</li> 
<li>數據1-3</li> 
<li>數據1-4</li> 
<li>數據2-1</li> 
<li>數據2-2</li> 
<li>數據2-3</li> 
<li>數據2-4</li> 
<li>數據3-1</li> 
<li>數據3-2</li> 
<li>數據3-3</li> 
<li>數據3-4</li> 
<li>數據4-1</li> 
<li>數據4-2</li> 
<li>數據4-3</li> 
<li>數據4-4</li> 
</ul> 
 

 　　一個無序列表biaoge，前四個列表項我們賦予了類biaotou。因為這四個項是表格頭部，應該與表格數據有所區別。所以單獨賦予了類，可以方便控制。下面我們開始CSS代碼的編寫：

引用： 

*{  
margin:0;  
padding:0;  
font-size:12px;  
color:#000;  
}  
 

　　CSS整體布局聲明，邊距為零，填充為零，文字大小為12px，文字顏色為黑色#000；

引用： 

#biaoge{  
width:405px;  
margin:50pxauto;  
}  
 
　　  

ID為biaoge的ul的CSS編碼，寬度為405px（一列100px*4列+li的邊距），上下邊距為50px，左右為自動，實現水平居中對齊。

引用： 

#biaogeli,#biaogeli.biaotou{  
list-style-type:none;  
width:100px;  
height:30px;  
line-height:30px;  
text-align:center;  
float:left;  
margin-left:1px;  
margin-bottom:1px;  
background:#ccc;  
}  

 　　對各個列表項li（即單元格）進行樣式定義，設置列表項預設標記為無，寬度與高度分別是100px、30px，為了讓文字垂直居中于li中，設置行高為30px，文字水平居中。設置為向左浮動，并且左邊距與底邊距均為1px，實現了簡單的表格線的效果。（如果設計成border的表格線，很多CSSHACK很難控制與調整，特別是FF中極不正常，不建議使用border來實現這類ul+li實現表格線的定義！）設置背景色為淺灰色#ccc。

引用： 

#biaogeli.biaotou{  
background:#999;  
}  

 　　我們設置四個“表頭”li的背景色為深灰色#999，與其它的li區別開來。我們的樣式定義基本就完成了。你可以在色彩上對它進行一些其它的美化。

　　最后我們再次聲明，表格類的數據最好是用表格來實現，符合WEB標準不必拘泥于完全不用表格，只是在適當的情況下，可以使用此案例的方法來實現類似于表格的布局，點擊這里查看最終效果。

【編輯推薦】

1. DIV CSS表單布局五個小技巧使用秘笈
2. 技術分享 如何實現CSS橫向導航
3. 術語匯編 基本CSS濾鏡概述
4. 完美實現豐富的CSS文字效果
5. 鼠標經過時改變DIV背景顏色的三種途徑