实现方法：(利用div的ul和li列表标记打造类似表格效果)

我们首先分析一下如何制作：li是固定的宽度与高度(单元格)，设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列(一行有多少列

通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距)。这样就实现了类似于表格的效果，或者说我们用

UL+LI模拟了表格的效果。我们开始HTML代码的编写：

• class="biaotou">第一列

• class="biaotou">第二列

• class="biaotou">第三列

• class="biaotou">第四列

• 数据1-1
• 数据1-2
• 数据1-3
• 数据1-4
• 数据2-1
• 数据2-2
• 数据2-3
• 数据2-4
• 数据3-1
• 数据3-2
• 数据3-3
• 数据3-4
• 数据4-1
• 数据4-2
• 数据4-3
• 数据4-4

一个无序列表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标准不必拘泥于完全不用表格，只是在适当的情况下，可以使用此案例的方法来实现类似于表格的布局。

源代码：

/p>

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.webjx.com

*

{ margin:0;

padding:0;

font-size:12px;

color:#000;

} #biaoge {

width:405px;

margin:50px auto;

} #biaoge li,#biaoge li.biaotou {

list-style-type:none;