基於DIV+ul+li實現的表格(多示例)
本文由 www.169it.com 蒐集整理
普通的顯示資料的時候，ul就是專案列表，li就是列表項。可以用來顯示資料。如果用於DIV＋CSS佈局的話，ul+li可以替換表格的作用，具體的設定，如果寬度高度、行間距、背景邊框等需要配合CSS一起設定。li是固定的寬度與高度（單元格），設定li在ul中浮動，當ul不夠寬的時候，li就會自動另起一行排列（一行有多少列通過計算即可得到ul的寬度，如一行四列，一列寬100px，那ul寬就是400px加上一定的邊距）。這樣就實現了類似於表格的效果，或者說我們用UL+LI模擬了表格的效果。
實現過程如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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>
|