Table的CSS美化样式

zhouguizhi 2011-08-11

[/size][size=large][/color][color=red]<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http:/[size=xx-large][/size]/www.w3.org/1999/xhtml">

<head>

<title>2.html</title>

<metahttp-eq[color=blue]uiv="Content-Type"content="text/html;charset=gb2312"/>

<styletype="text/css">

body{

font:normal11pxauto"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;

color:#4f6b72;

background:#E6EAE9;

}

table{

width:700px;

padding:0;

margin:0;

}

td{

border-right:1pxsolid#C1DAD7;

border-bottom:1pxsolid#C1DAD7;

font-size:11px;

padding:6px6px6px12px;

color:#4f6b72;

}

tr:hover{

background-color:#B0C4DE;

}

th{

font:bold11px"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;

color:#4f6b72;

border-right:1pxsolid#C1DAD7;

border-bottom:1pxsolid#C1DAD7;

border-top:1pxsolid#C1DAD7;

letter-spacing:2px;

text-transform:uppercase;

text-align:center;

padding:6px6px6px12px;

background:#CAE8EAno-repeat;

}

a:link{

color:red;

text-decoration:none;

}

a:hover{

color:blue;

text-decoration:none;

}

a:visited{

color:green;

text-decoration:none;

}

a:active{

color:orange;

text-decoration:none;

}

</style>

</head>

<body>

<divalign="center">

<table>

<tr>

<th>姓名</th>

<th>学号</th>

<th>密码</th>

<th>操作</th>

</tr>

<tr>

<td>111</td>

<td>111</td>

<td>111</td>

<td><ahref="http:www.hao123.com">修改</a>&nbsp;&nbsp;<ahref="http://www.baidu.com">删除</a></td>

</tr>

<tr>

<td>222</td>

<td>222</td>

<td>222</td>

<td><ahref="http:www.hao123.com">修改</a>&nbsp;&nbsp;<ahref="http://www.baidu.com">删除</a></td>

</tr>

<tr>

<td>333</td>

<td>333</td>

<td>333</td>

<td><ahref="http:www.hao123.com">修改</a>&nbsp;&nbsp;<ahref="http://www.baidu.com">删除</a></td>

</tr>

</table>

</div>

</body>

</html>[/color]

相关推荐