<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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的話一看就明白了