用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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM