1、表格的初步优化
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style6.css" type="text/css" rel="stylesheet">
</head>
<body> <table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td></td>
<td>男</td>
</tr> </table>
</body>
</html>
MyCss6.css
#tb,tr,th,td{
border: 1px solid blue;
text-align: center;
background-color: aqua;
}
#tb{
width:400px;
height:400px;
border-collapse: collapse;
}
效果：
2、表格的进一步优化：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style6.css" type="text/css" rel="stylesheet">
</head>
<body> <table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td></td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td></td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td></td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td></td>
<td>男</td>
</tr> </table>
</body>
</html>
css:
#tb{
border-collapse: collapse;
width:500px;
}
#tb td,#tb th{
border:1px solid bisque;
padding: 5px;
}
#tb th{
text-align: right;
background-color: aqua;
color: #FFFFFF;
}
#tb tr.alt td{
color:black;
background-color: aquamarine;
}
效果：
