用div,ul,li,span代替table设计表格

传统的表格一般都是用table标签设计的，现在网页设计很少用table了，主要用div,ul,li,span等标签，这是一种网页设计的思想了，和table不一样。用这种方式设计的html代码结构清晰，很容易输出后台的数据或调用程序的标签语言(碎片功能)。

<style>
DIV,UL,LI,SPAN {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

UL {
 LIST-STYLE-TYPE: none
}
.head {
 OVERFLOW: hidden;WIDTH: 708px;_WIDTH: 701px;
}
.head UL {
 BACKGROUND: #eee; HEIGHT: 24px;border-bottom: #CCC 1px solid;;border-top: #CCC 1px solid;;border-right: #CCC 1px solid
}
.head UL LI {
 FONT-WEIGHT: 700; FLOAT: left; WIDTH: 100px; COLOR: #666; LINE-HEIGHT: 24px; HEIGHT: 24px; TEXT-ALIGN: center; font-size:12px;border-left: #CCC 1px solid; overflow:hidden
}
.body {
 OVERFLOW: hidden;WIDTH: 708px;_WIDTH: 701px;
}
.body UL LI {
 BACKGROUND: #fff; OVERFLOW: hidden;border-bottom: #CCC 1px solid;border-right: #CCC 1px solid;float:left;
}
.body UL LI span { width:98px;_width:100px; background-color:#F90; font-size:12px; padding-left:2px; border-left: #CCC 1px solid; float:left; height:27px; line-height:27px; overflow:hidden
}
</style>

<div class="head">
<ul>
<li>服务器名</li>
<li>服务器IP</li>
<li>开区时间</li>
<li>开区线路</li>
<li>特色介绍</li>
<li>登陆器下载</li>
<li>游戏官方</li></ul>
</div>
<div class="body">
<ul>
<li>
<span>服务器名1</span><span>服务器IP1</span><span>开区时间1</span><span>开区线路1</span><span>特色介绍1</span><span>登陆器下载1</span><span>游戏官方1</span>
</li>
<li>
<span>服务器名2</span><span>服务器IP2</span><span>开区时间2</span><span>开区线路2</span><span>特色介绍2</span><span>登陆器下载2</span><span>游戏官方2</span>
</li>
<li>
<span>服务器名2</span><span>服务器IP2</span><span>开区时间2</span><span>开区线路2</span><span>特色介绍2</span><span>登陆器下载2</span><span>游戏官方2</span>
</li>
<li>
<span>服务器名2</span><span>服务器IP2</span><span>开区时间2</span><span>开区线路2</span><span>特色介绍2</span><span>登陆器下载2</span><span>游戏官方2</span>
</li>
</ul>
</div>

以上是理想的表格，表格单元的宽度是一样的，如果要设置宽度，可以在span标签上添加class属性，然后在样式里单独设置宽度就可以了