1、CSS表格
CSS表格属性可以帮助我们极大的改善表格的外观
2、表格边框
3、折叠边框
4、表格宽高
5、表格文本对齐
6、表格内边距
7、表格颜色
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
</table>
</body>
</html>
/*style.css*/
#tb,tr,th,td{
border: 1px solid blueviolet;
text-align: center;
background-color: red;
} #tb{
width: 400px;
height: 400px;
border-collapse: collapse;
/*!*将两条边框合并成一条边框*!*/
}
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr class="alt">
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td>02</td>
<td>男</td>
</tr>
</table>
</body>
</html>
#tb{
border-collapse: collapse;
width: 500px;
}
#tb td,#tb th{
border: 1px solid darkolivegreen;
padding: 5px;
}
#tb th{
text-align: left;
background-color: blueviolet;
color: white;
}
#tb tr.alt td{
color: black;
background-color: aqua;
}
