<div>
<strong></strong><span></span>//这是一条记录，你只要循环这里就好
</div>
css:
div{border-top:1px solid #efefefborder-left:1px solid #efefef}//这是外围DIV的CSS样式
div strong,div span{float:leftborder-right:1px solid #efefefdisplay:blockheight:50pxborder-bottom:1px solid #efefef}//定义一条记录的边框和高度
div strong{width:10%}//小的宽度
div span{width:40%}//大的宽度
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>用CSS做表格</title>
<style type="text/css">
ul{padding:0
width:324px /*设置表格宽 */
height:42px /*设置表格高*/
margin:30px
border-top:red 1px solid /*设置表格上边框*/
border-right:red 1px solid /*设置表格右边框*/
}
li{ border-left:red 1px solid /*设置表格左边框*/
border-bottom:red 1px solid/*设置表格下边框*/
/*设置单元格边框*/
list-style:none /*清除项目列表前的标记*/
float:left /*设置单元格浮动，用于水平排列*/
display:block /*设置单元格为块级元素于用语控制大小等*/
width:80px /*设置单元格宽*/
height:20px /*设置单元格高*/
text-align:center /*设置单元格内文本对齐方式*/
}
/*原理就是利用项目列表的每个项目做出表格中的每个单元格，然后通过设置ul和li的边框达到设置表格的边框效果*/
</style>
</head>
<body>
<ul>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
<li>表格</li>
</ul>
</body>
</html>
我都做了注释了,你复制到记事本中,改下后缀名,打开看下效果!
如果懂CSS的话一看就明白了
