今天带了一篇简短的教程，用CSS的UL LI制作实现一个表格，以往听说CSS实现表格并不好，还不如直接用传统的TABLE来实现，其实我不这么认为，如果你CSS非常熟练了，用CSS来实现表格同样很省事，不信就看一下这个代码吧：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用CSS的UL LI实现表格布局</title>
</head>
<style>
*{margin: 0 auto;padding: 0px;list-style: none;}
.e{width: 500px;border-top: solid #f00 1px;border-left: 1px solid #f00;display: table;margin-top: 50px;}/*定义表格区域大小和边框等参数*/
li{float: left;}/*一定要记着让LI向左浮动，这样后边的才会自动跟进*/
.id,.name,.x,.z,.d{color: #999;font-size: 12px;text-align: center;border-right: 1px solid #f00;border-bottom: 1px solid #f00;height: 22px;line-height: 22px;}/*定义表格表头等*/
.id{width: 20px;}
.name{width: 50px;}
/*以下定义表格每列的宽度*/
.x{width: 30px;}
.z{width: 30px;}
.d{width: 365px;}
</style>
<body>
<div class="e">
<ul>
<li class="id">ID</li>
<li class="name">名字</li>
<li class="x">性别</li>
<li class="z">年龄</li>
<li class="d">地址</li>
</ul>
<ul>
<li class="id">1</li>
<li class="name">本山</li>
<li class="x">女</li>
<li class="z">22</li>
<li class="d">北京</li>
</ul>
<ul>
<li class="id">2</li>
<li class="name">小曾</li>
<li class="x">男</li>
<li class="z">26</li>
<li class="d">上海</li>
</ul>
</body>
</html>最后来看下表格的效果，还不错吧，而且兼容火狐、Chrome等浏览器。
