本教程是利用DIV+CSS的UL LI實現表格的形式的一種方法，也就是說在標準前提下可以實現表格的形式的。
表格的資料，就應該使用表格來組織，不是說製作符合WEB標準的網站，表格就一無是處、徹底下崗了。表格類的資料，它有著得天獨厚的條件，也非常方便組織。這類資料內容直接使用表格就可以了。
或許你認為你的資料並不是表格式的資料，還有著其它的用法或你自己的見解，我們也可以用ul、li來實現表格形式的布局。
我們首先分析一下如何製作：li是固定的寬度與高度（儲存格），設定li在ul中浮動，當ul不夠寬的時候，li就會自動另起一行排列（一行有多少列通過計算即可得到ul的寬度，如一行四列，一列寬100px，那ul寬就是400px加上一定的邊距）。這樣就實現了類似於表格的效果，或者說我們用UL+LI類比了表格的效果。我們開始HTML代碼的編寫：
<ul id="biaoge">
<li class="biaotou">第一列</li>
<li class="biaotou">第二列</li>
<li class="biaotou">第三列</li>
<li class="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:50px auto;
}
ID為biaoge的ul的CSS編碼，寬度為405px（一列100px*4列+li的邊距），上下邊距為50px，左右為自動，實現水平置中對齊。
#biaoge li,#biaoge li.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的表格線，很多CSS HACK很難控制與調整，特別是FF中極不正常，不建議使用border來實現這類ul+li實現表格線的定義！）設定背景色為淺灰色#ccc。
#biaoge li.biaotou {
background:#999;
}
我們設定四個“表頭”li的背景色為深灰色#999，與其它的li區別開來。我們的樣式定義基本就完成了。你可以在色彩上對它進行一些其它的美化。
最後我們再次聲明，表格類的資料最好是用表格來實現，符合WEB標準不必拘泥於完全不用表格，只是在適當的情況下，可以使用此案例的方法來實作類別似於表格的布局。
運行下面代碼可以查看示範效果：
<!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=gb2312" /><title>www.webjx.com</title><style type="text/css">* { margin:0; padding:0; font-size:12px; color:#000;}#biaoge { width:405px; margin:50px auto;}#biaoge li,#biaoge li.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;}#biaoge li.biaotou { background:#999;}</style></head><body><ul id="biaoge"> <li class="biaotou">第一列</li> <li class="biaotou">第二列</li> <li class="biaotou">第三列</li> <li class="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></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
