web前端入门到实战：html表格table的使用,以及表格的css样式

<style>

table{
border-spacing:0px;/*设置边框的距离*/
border-collapse: collapse ;/*合并边框(设置了此属性 边框的距离就没用了 所以用此属性无需再设置边框距离)*/
}
td,th{
border:1px solid Black;
}
tr:nth-child(odd){/*设置隔行背景不同色:参数:even 表示偶数  odd  表示奇数 */
background-color:#bfa;
}
tr:hover{
background-color:yellow
;
}
</style>
<table>
<tr>
	<!--th(table head)是特殊的一个td,用法跟td一样,只是他会有一些默认的样式(居中、加粗).可用来设置表头-->
	<th>表格内容</th>
	<th colspan="4">表格内容</th><!--colspan横向合并单元格.需要后面的行 然后前面的加一个rowspan指定占用的列数-->
</tr>
<tr>	
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
</tr>
<tr>	
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td rowspan="2">表格内容</td><!--rowspan纵向合并单元格.需要删除一列 然后前面的加一个rowspan指明占用的行数-->
</tr> 
<tr>	 
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>

</tr>
<tr>	 
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
</tr>
<tr>	 
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td> 
	<td>表格内容</td>
</tr>
<tr>	 
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td>
	<td>表格内容</td> 
	<td>表格内容</td>
</tr>
</table>

如果大家对编程，web前端感兴趣，想要了解学习，打算深入了解这个行业的朋友，我们的前端学习扣qun :767273102，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，网页制作，网站开发，web全栈开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系路线图】都有整理，分享给小伙伴：学习前端我们是认真的

有一些情况下表格是非常的长的，

这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签:

thead表头

tbody表格主体

tfoot表格底部

这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，

都需要直接写到table中，tr需要写在这些标签当中

thead中的内容，永远会显示在表格的头部:

tfoot中的内容，永远都会显示表格的底部

tbody中的内容，永远都会显示表格的中间

注意:设置样式时:

如果表格中没有写tbody,浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中,所以tr并不是table的子元素.而是他的后代