table 远没有用 CSS 控制的代码结构清晰，而且一旦 CSS 被缓存到客户端，直接从服务器端加载的数据就大大减少了。因此，有众多的人开始研究 table 的替代方案，从页面布局到内容导航，而本文介绍的技巧是用 CSS 控制来实现类似于 table 的数据列表样式。
代码如下
复制代码
<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>
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 是很容易实现类似 table 的数据列表样式，接下来让我们看看代码：
