<!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>
总结:
1.border-collapse:表示将表格的边框,合并到一起;
2.margin:0 auto;表示把表格页面居中;
3.caption-side:上下左右的位置;
4.table-layout:automatic;默认值,分配表格中的各个列;
网友评论