<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> table屬性 </title>
<style type="text/css">
table{
width:500px;
text-align:center;
border:4px solid silver;
border-collapse:collapse;
background-color:pink;
margin:0 auto;
}
tr,td,th{
border:1px solid blue;
line-height:40px;
}
tr.tr-th{
background-color:silver;
}
</style>
</head>
<body>
<table>
<caption><h1>英雄排行榜</h1></caption>
<tr class="tr-th">
<th width="15%">編號</th>
<th width="15%">姓名</th>
<th width="70%">外號</th>
</tr>
<tbody>
<tr>
<td>001</td>
<td>諾克薩斯之手</td>
<td>這貨不是德萊德萊德萊德萊德萊德萊德萊德萊德萊文</td>
</tr>
<tr>
<td>002</td>
<td>德瑪西亞之力</td>
<td>蓋倫</td>
</tr>
<tr>
<td>003</td>
<td>寒冰射手</td>
<td>艾希</td>
</tr>
<tr>
<td>004</td>
<td>虛空先知</td>
<td>螞蚱</td>
</tr>
</tbody>
</table>
</body>
</html>
總結(jié):
1.border-collapse:表示將表格的邊框,合并到一起;
2.margin:0 auto;表示把表格頁面居中;
3.caption-side:上下左右的位置;
4.table-layout:automatic;默認值,分配表格中的各個列;
