用 UL 实现类似 Table 的数据列表样式

在 CSS 变成热门之前,大多数人都是用 table 来显示数据或者控制页面布局,自从大家开始关注 CSS 起,人们发现, table 远没有用 CSS 控制的代码结构清晰,而且一旦 CSS 被缓存到客户端,直接从服务器端加载的数据就大大减少了。因此,有众多的人开始研究 table 的替代方案,从页面布局到内容导航,而本文介绍的技巧是用 CSS 控制 <ul> 来实现类似于 table 的数据列表样式。

先看看效果:

css table

用 UL 实现类似 Table 的数据列表样式 – 示例

通过上面的图片和示例,我们很容易发现通过 CSS 是很容易实现类似 table 的数据列表样式,接下来让我们看看代码:

先看看 CSS 部分:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; 
	font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #003499; 
	text-decoration: none; 
	font-size: 12px;
}
a:hover {
	color: #000000; 
	text-decoration: underline; 
	font-size: 12px;
}
ul{
	margin:0px;
	padding:0px;
	width:265px;
	display:block;
	clear:both;
}
ul li{
	float:left;
	list-style-type:none;
	border-top:#000 solid 1px;
	border-left:#000 solid 1px;
	width:65px;
}
.border-r{
	border-right:#000 solid 1px;
}
.border-b{
	border-bottom:#000 solid 1px;
}
.border-l{
	border-right:#000 solid 1px;
	border-bottom:#000 solid 1px;
}
-->
</style>

接着再看看 (X)HTML:

 
<ul>
	<li>1-1</li>
	<li>1-2</li>
	<li>1-3</li>
	<li class="border-r">1-4</li>
</ul>
<ul>
	<li>2-1</li>
	<li>2-2</li>
	<li>2-3</li>
	<li class="border-r">2-4</li>
</ul>
<ul>
	<li>3-1</li>
	<li>3-2</li>
	<li>3-3</li>
	<li class="border-r">3-4</li>
</ul>
<ul>
	<li class="border-b">4-1</li>
	<li class="border-b">4-2</li>
	<li class="border-b">4-3</li>
	<li class="border-l">4-4</li>
</ul>

可见,控制显示样式的代码和数据结构分离后,整个代码更加清晰了,同时一旦 CSS 被缓存了,在其他页面调用相同样式的时候,加载的代码大大减少,而且,通过这样分离,我们很容易通过修改 CSS 而改变整个网站的风格。使网站改版或者维护变得更加容易。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>