一、表格标签的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非变强。
表格不是用来布局页面的,而是用来展示数据的.
二、表格标签的基本语法
<!-- 表格标签 -->
<table>
<!-- 表格的头部区域 -->
<thead>
<tr>
<!-- 表头标签，第一行，居中加粗显示 -->
<th></th>
</tr>
</thead>
<!-- 表格的躯干部分 -->
<tbody>
<!-- 表格的行 -->
<tr>
<!-- 表格的列 -->
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
注解：
1.table标签：用于定义表格的标签。所有的表格标签属性都要写在table里面。
2.thead标签：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
3.th标签：该表格的表头部分。
表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示.
4.td标签：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
5.tbody标签：用于定义表格的主体，主要用于放数据本体 。
6.tr标签：用于定义表格中的行，必须嵌套在 <table> </table>标签中
三、表格标签的属性
align是表格相对页面对齐方式，有left/center/right三种方式，分别是左对齐，居中对齐，和右对齐。
border是表格的边框线宽度，默认为无边框。
cellspacing是单元格之间的空白，即边框线的宽度。
cellpadding是单元格内容距边框线的空白。即内容与边框线的距离。
width是表格的宽度。
所有属性都要写在table标签里。
表格属性.png
<table align="center" border="1" cellspacing=0 cellpadding=10 width=500>
四、合并单元格
合并单元格方式：
跨行合并：rowspan="合并单元格的个数" 从上到下 ：最上侧单元格为目标单元格, 写合并代码
跨列合并：colspan="合并单元格的个数" 从左到右：最左侧单元格为目标单元格, 写合并代码
单元格合并.png
合并单元格三步曲：
- 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。
- 删除多余的单元格。
<th colspan="5">个人简历</th>
<td rowspan="4">照片</td>
五、案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width=500 height=800>
<thead>
<tr>
<th colspan="6">
<h2>个人简历</h2>
</th>
</tr>
</thead>
<tbody>
<!-- 第二行 -->
<tr align="center">
<td>姓名：</td>
<td>小艾</td>
<td>专业：</td>
<td>修仙</td>
<!-- 跨列合并2个单元格，跨行合并3个单元格 -->
<td colspan="2" rowspan="3"></td>
</tr>
<!-- 第三行 -->
<tr align="center">
<td>性别：</td>
<td>女</td>
<td>毕业学校：</td>
<td>家里蹲大学</td>
</tr>
<!-- 第四行 -->
<tr align="center">
<td>名族：</td>
<td>汉</td>
<td>住址：</td>
<td>火星</td>
</tr>
<!-- 第五行 -->
<tr align="center">
<td>学历：</td>
<td>博士前</td>
<td>邮箱：</td>
<td>123.com</td>
<td>联系方式：</td>
<td>110</td>
</tr>
<!-- 第六行 -->
<tr align="center">
<td>出生日期：</td>
<td>1999</td>
<td>电话：</td>
<td>123456789</td>
<td> 邮编</td>
<td>654321</td>
</tr>
<!-- 第七行 -->
<tr>
<!-- 跨列合并2个单元格 -->
<td colspan="2" align="center">实习经历</td>
<!-- 跨列合并4个单元格 -->
<td colspan="4">搬砖</td>
</tr>
</tbody>
</table>
</body>
</html>
表格案例.png
