表格
在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格 变成了一个极受欢迎的布局工具。
但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来 表示格式化的数据。
HTML中的表格可以很复杂，但是通常情况下我们不需 要创建过于复杂的表格。table、tr、th、td
使用table标签创建一个表格。
• tr表示表格中的一行。
• tr中可以编写一个或多个th或td。
• th表示表头。
但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来 表示格式化的数据。
HTML中的表格可以很复杂，但是通常情况下我们不需 要创建过于复杂的表格。table、tr、th、td
使用table标签创建一个表格。
• tr表示表格中的一行。
• tr中可以编写一个或多个th或td。
• th表示表头。
简单的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
在网页中也可以来创建出不同的表格。
-->
<!--
在HTML中，使用table标签来创建一个表格
-->
<table border="1" width="40%" align="center">
<!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
设置表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 设置表格的宽度
*/
table{
width: 300px;
/*居中*/
margin: 0 auto;
/*边框*/
/*border:1px solid black;*/
/*
* table和td边框之间默认有一个距离
* 通过border-spacing属性可以设置这个距离
*/
/*border-spacing:0px ;*/
/*
* border-collapse可以用来设置表格的边框合并
* 如果设置了边框合并，则border-spacing自动失效
*/
border-collapse: collapse;
/*设置背景样式*/
/*background-color: #bfa;*/
}
/*
* 设置边框
*/
td , th{
border: 1px solid black;
}
/*
* 设置隔行变色
*/
tr:nth-child(even){
background-color: #bfa;
}
/*
* 鼠标移入到tr以后，改变颜色
*/
tr:hover{
background-color: #ff0;
}
</style>
</head>
<body>
<!--
table是一个块元素
-->
<table>
<tr>
<!--
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果
-->
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>流沙河</td>
</tr>
</table>
</body>
</html>
长表格
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素通过table > tr 无法选中行 需要通过tbody > tr
表格的布局
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了表格的列数由td最多的那行决定表格是可以嵌套，可以在td中在放置一个表格
完善clearfix
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
解决父子原始外边距重叠
/**
* 解决父子元素的外边距重叠
*/
.box1:before{
content: "";
/*
* display:table可以将一个元素设置为表格显示
*/
display: table;
}
原来解决高度塌陷
/**
* 解决父元素高度塌陷
*/
.clearfix:after{
content: "";
display: block;
clear: both;
}
整合版
/*
* 经过修改后的clearfix是一个多功能的
* 既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}