用CSS怎么做表格？

html-css024

用CSS怎么做表格？,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>DIV+CSS表格效果</title>

<style type="text/css">

* {margin:0padding:0}

#main {margin:100px 0 0 200px}

#main ul {width:520pxheight:165pxlist-style:none}

#main li {border-left:1px solid #cccborder-top:1px solid #cccfloat:leftwidth:102pxheight:33pxtext-align:centerline-height:33px}

#main li.b {border-bottom:1px solid #ccc}

#main li.r {border-right:1px solid #ccc}

</style>

</head>

<body>

<div id="main">

<ul>

<li>11</li>

<li>11</li>

<li>11</li>

<li>11</li>

<li class="r">11</li>

<li>怎么样？</li>

<li>还行吧？</li>

<li></li>

<li></li>

<li class="r">11</li>

<li>上海世博</li>

<li></li>

<li></li>

<li></li>

<li class="r">11</li>

<li></li>

<li></li>

<li></li>

<li></li>

<li class="r">11</li>

<li class="b">生活更美好</li>

<li class="b"></li>

<li class="b"></li>

<li class="b"></li>

<li class="b r">11</li>

</ul>

</div>

</body>

</html>

1.单条虚线代码：

<hr style="BORDER-BOTTOM-STYLE: dottedBORDER-LEFT-STYLE: dottedBORDER-RIGHT-STYLE: dottedBORDER-TOP-STYLE: dotted" color=#000000 size=1>

定义一些参数可以获取可爱的细虚线。我们也可以修改其中的color,size的参数可以得到不同的效果……

2.CSS定义表格边框大全(细线/虚线/点线) 定义表格边框全部为1 边框颜色 #C7C7C7代码为： .tb1{ border:1px solid #C7C7C7} 定义表格边框 左1 下1 左1 右1 (实际同上) 边框颜色 #C7C7C7代码为： .td2{ border-top:1px solid #C7C7C7border-bottom:1px solid #C7C7C7border-left:1px solid #C7C7C7border-right:1px solid #C7C7C7} 定义表格边框为1,上边框为0 边框颜色 #C7C7C7 下边框颜色为 #888888代码为： .td2{ border:1px solid #C7C7C7border-top:0pxborder-bottom:1px solid #888888} 定义表格边框虚线代码为： .tb1{ border:1px dashed #C7C7C7} 定义表格边框点线代码为： .tb1{ border:1px dotted #C7C7C7}