用ul和li实现表格table效果 (转)

用ul和li实现表格table效果,很多时候表格table的框架太死,而且代码太多,如你想加句话至少也要<tr><td></td></tr>说不一定外面还要加一个table很麻烦,而用ul和li处理代码量相对就减少了,但是就要求你对css掌握要求很高,今天同志们不用担心了,原代码分享出来了,我朋友也找这个很久了才找到的,我今天分享给大家。
用ul和li实现表格table效果图:

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用UL和LI标签实现的表格table效果</title>
<style type="text/css">
<!--
ul{ list-style:none; padding:0px; margin:0px; width:590px;
height:20px; line-height:20px; border:1px solid #99CC00;
border-top:0px; font-size:12px;}
ul li{ display:block; width:33%; float:left;text-indent:2em}
.th{ background:#F1FADE; font-weight:bold; border-top:1px }
-->
</style>
</head>
<body>
<h1><a href="http://www.66css.com">www.66css.com</a></h1>
<ul class="th">
<li>姓名</li>
<li>班级</li>
<li>年龄</li>
</ul>
<ul>
<li>阿三</li>
<li>3-1</li>
<li>13</li>
</ul>
<ul>
<li>小龙</li>
<li>2-4</li>
<li>16</li>
</ul>
<ul>
<li>大马</li>
<li>5-3</li>
<li>17</li>
</ul>
</body>
</html>

posted @ 2012-03-06 17:22  郑文亮  阅读(33526)  评论(0编辑  收藏  举报