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

喜欢ヅ旅行 2022-08-27 02:26 147阅读 0赞

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

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> 
服务器名1服务器IP1开区时间1开区线路1特色介绍1登陆器下载1游戏官方1 
</li> 
<li> 
服务器名2服务器IP2开区时间2开区线路2特色介绍2登陆器下载2游戏官方2 
</li> 
<li> 
服务器名2服务器IP2开区时间2开区线路2特色介绍2登陆器下载2游戏官方2 
</li> 
<li> 
服务器名2服务器IP2开区时间2开区线路2特色介绍2登陆器下载2游戏官方2 
</li> 
</ul> 
</div>

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

[20120625153656691.jpg]: /images/20220824/36ac4ce0f99d4107b763984ed49f4e48.png