<!DOCTYPE html>
<html>
<head>
<title>数据表</title>
<style type="text/css">
*{margin:0;padding:0;}
table{
margin:10px;
width:80%;
border-left:1px solid #666666;
border-bottom:1px double #666666;
}
caption{
border-right:1px solid #666;
border-top:1px solid #666;
border-left:1px solid #666;
padding: 5px 0 5px 0;
background-color:#F5F5F5;
}
thead tr th{
padding: 5px 0 5px 0;
background-color:#90EE90;
border-bottom:1px double #000080;
}
tbody tr{
text-align:center;
}
th,td{
border-right:1px solid #666666;
border-top:1px solid #666666;
}
.alt{
background:#F0F8FF;
}
tr:hover{
background:#7CFC00;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<caption>住房贷款还款计划</caption>
<thead>
<tr>
<th>序号</th>
<th>住址</th>
<th>姓名</th>
<th>借贷日</th>
<th>借贷金额</th>
<th>期限</th>
<th>贷款利率</th>
<th>还贷日</th>
<th>还贷金额</th>
<th>银行</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------
注意：为了使行达到交叉背景色的效果，不要在*{}中设置background，否则tr的background会失效。