html中table的使用（2）一般資料表
<!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會失效。