目录
一、表格标签
1、主体标签（table）
只要使用表格，表格附属的所有标签必须在table标签中，也就是table的后代元素
2、行标签（tr）
一个行标签生成一行，但若没有列标签填充就是默认一个行表格
3、列标签（td）
列标签是行标签的子标签，必须嵌套在行标签tr中，一个标签就是在行中生成一列
4、行列合并
（1）行合并（colspan），里面的参数为合并的个数
（2）列合并（rowspan），里面的参数同样为合并的个数
二、表格样式属性
1、边界
通过border设置元素边界
2、边界间隔
用border-spaceing设置各个边界的距离，大小可以设置为像素
3、边距重叠
用border-collapse: collapse;将所有边界重叠，这种方式可以达到excel表格的效果
4、文字居中
（1）垂直居中，vertical-align: middle;
（2）水平居中，text-align: center;
5、元素居中
可以将元素的显示方式设置为表格，然后用文字居中的方式设置子元素居中效果，例如
display: table-cell;
三、长表格
1、区域划分
（1）头部（thead）
（2）中间（tbody）
（3）结尾（tfoot）
然后在各类别中使用tr和td设置表格
注意：在这里，tr是此三类的子元素，但如果不使用区域划分，那么浏览器会自行创建tbody，将所有tr变为子元素，此时tr就是table的后代元素，而不是子元素
2、th标签
头部可以用th标签，有居中加粗的效果
四、代码实例
1、表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格</title>
</head>
<body>
<table border="1" width="50%" align="center">
<!-- 此样式可通过css设置，这里是内联样式 -->
<!--
table是主体
tr表示行数
td表示列数
-->
<tr>
<td>1</td>
<td>2</td>
<!-- colspan进行行合并，数值为合并单元格大小 -->
<td colspan="2">3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<!-- rowspan进行列合并，数值为合并单元格大小 -->
<td rowspan="2">12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</body>
</html>
2、表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格样式</title>
<!--
在没有tbody的情况下，所有tr都会默认成为tbody的子元素
所以此时tr不是table的子元素，而是后代元素
-->
<style>
table {
width: 50%;
border: 1px solid black;
/*
border-spacing用于设置两边距的间隔
*/
/*
border-collapse: collapse;
用于取消边距，使之重叠
*/
border-collapse: collapse;
}
td {
border: 1px solid black;
height: 50px;
/* 上下左右文字居中 */
text-align: center;
vertical-align: top;
}
tr:nth-child(odd) {
background-color: #bfa;
}
.box1 {
height: 400px;
width: 400px;
background-color: red;
/* 可通过设置display转换为表格从而用文本设置方式居中元素 */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box2 {
height: 100px;
width: 100px;
background-color: yellow;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>性别</td>
<td>年龄</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>男</td>
<td>18</td>
<td>孙悟空</td>
</tr>
<tr>
<td>2</td>
<td>女</td>
<td>18</td>
<td>猪八戒</td>
</tr>
<tr>
<td>3</td>
<td>男</td>
<td>18</td>
<td>沙和尚</td>
</tr>
<tr>
<td>3</td>
<td>男</td>
<td>18</td>
<td>沙和尚</td>
</tr>
<tr>
<td>3</td>
<td>男</td>
<td>18</td>
<td>沙和尚</td>
</tr>
<tr>
<td>3</td>
<td>男</td>
<td>18</td>
<td>沙和尚</td>
</tr>
<tr>
<td>3</td>
<td>男</td>
<td>18</td>
<td>沙和尚</td>
</tr>
</table>
</body>
</html>
3、长表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>长表格</title>
</head>
<body>
<table border="1" align="center" width="50%">
<!--
长表格通过三个区域进行划分，头部（thead），中间（tbody）和结尾（tfoot）
头部可以用th标签，有居中加粗的效果
-->
<thead>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</thead>
<tbody>
<tr>
<td>2022.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>2022.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>2022.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>2022.1.1</td>
<td>500</td>
<td>300</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>800</td>
</tr>
</tfoot>
</table>
</body>
</html>