8：CSS表格

一. 创建表格

使用table标签创建一个表格。

tr表示表格中的一行（一个表格中有几行，就有几个tr标签）
th表示表格的表头（一个表格中有几列，就可以设置几个th标签）
td表示表格中的一个单元格（一个表格中n行， m列，就有n行 * m个td标签）
tr中可以包含一个或多个td

二. 设置表格边框

一般table、td、th标签都会设置边框，然后将table的边框间距设置为0，并且合并边框。如果边框间距设置的值>0，则不要再设置合并边框。

table{
    width: 40%;
    border: 1px #000 solid;
    border-spacing: 0; /*设置相邻单元格的边框间的距离为0*/
    border-collapse: collapse;/*合并边框*/
}
td,th{
    border: 1px #000 solid;
}

三. 表格隔行换色

巧记：odd，三个字母，所以是奇数换色。even，4个字母，所以是偶数换色

/*奇数换色*/
tr:nth-child(odd){
    background-color: #D9E1F2;
}

/*偶数换色*/
tr:nth-child(even){
    background-color: #D9E1F2;
}

/*鼠标悬浮时换色*/
tr:hover{
background-color: yellowgreen;
}

四. 合并单元格

合并单元格可以通过在th和td中设置属性来完成。

横向合并：colspan
纵向合并：rowspan

<table>
			
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>张甲</td>
					<td>张洁</td>
				</tr>
				<tr>
					<td>男</td>
					<td>女</td>
				</tr>	
			</tbody>
			<caption> 表格标题 </caption>
			<tfoot>
				<tr>
					<td colspan="2">汇总</td>
					
					<!--<td>汇总</td> -->
				</tr>
			</tfoot>
		</table>