用ul和li实现表格table效果 （转）
用ul和li實現(xiàn)表格table效果，很多時候表格table的框架太死，而且代碼太多，如你想加句話至少也要<tr><td></td></tr>說不一定外面還要加一個table很麻煩，而用ul和li處理代碼量相對就減少了，但是就要求你對css掌握要求很高，今天同志們不用擔心了，原代碼分享出來了，我朋友也找這個很久了才找到的，我今天分享給大家。
用ul和li實現(xiàn)表格table效果圖：
?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用UL和LI標簽實現(xiàn)的表格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>
轉(zhuǎn)載于:https://www.cnblogs.com/zhwl/archive/2012/03/06/2382319.html
總結(jié)
以上是生活随笔為你收集整理的用ul和li实现表格table效果 （转）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c# DllImport 错误处理的不
- 下一篇： IDispose和Finalize的区别