巧用CSS 美化表格 table css table
以下是htmlcss完整代码：
这是table背景图片：下载：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
table {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
margin:100px;
border-collapse:collapse;
}
th,td {
border:1px solid #ccc;
padding:5px 10px;
}
th{ background:url(images/table_th.gif) repeat-x;}
.blue {
background:#DBECF4;
}
tr:a hover {
background:#0066CC;
color: #3399FF;
}
tr:hover th{
color:#000;;
}
a:hover {
background-color:#0000FF;
}
</style>
</head>
<body>
<table>
<tr class="blue">
<th></th>
<th>Track Name</th>
<th>Artist</th>
<th>Album</th>
</tr>
<tr>
<td>1</td>
<td>Hide You</td>
<td>Kosheen</td>
<td>Resist</td>
</tr>
<tr class="blue">
<td>2</td>
<td>.38.45</td>
<td>Thievery Corporation</td>
<td>Sounds From the Thievery Hi-Fi</td>
</tr>
<tr>
<td>3</td>
<td>Fix You</td>
<td>Cold Play</td>
<td>X&Y</td>
</tr>
<tr class="blue">
<td>4</td>
<td>Hide You</td>
<td>Kosheen</td>
<td>Resist</td>
</tr>
<tr>
<td>5</td>
<td>.38.45</td>
<td>Thievery Corporation</td>
<td>Sounds From the Thievery Hi-Fi</td>
</tr>
<tr class="blue">
<td>6</td>
<td>Fix You</td>
<td>Cold Play</td>
<td>X&Y</td>
</tr>
</table>
</body>
</html>
table背景图片
这是最终效果：
