表格的基本结构：
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--
table 为表格
tr/th 行
td 列（每一个单元格）
-->
<tr> </tr>:表格的行<td> </td>:表格的每行被分割成若干单元格，由<td></td>标签定义。（td指表格数据，table data）
<table border="1"><!--如果不定义边框属性，表格将不显示边框-->
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
显示效果：
<th> </th>标签是表格的表头，理解为将文本加粗水平居中显示的<td>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th><!-- 表头-->
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格的属性：
- width=“表格的宽度”
- height=“表格的高度”
- border=“表格的边框”
- bordercolor=“边框色”
- cellspacing=“单元格与单元格之间的间距”
- cellpadding=“单元格与内容之间的距离"
- 合并单元格属性：(td)
合并列： colspan=“所要合并的单元格的列数"
合并行： rowspan=“所要合并单元格的行数” - 8.align=“表格水平对齐方式” 取值：left、right、center、 valign=“垂直对齐”
top\bottom\middle
相关练习：
<table border="1px" width="360px" height="100px" cellspacing="0px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
</table>
<table border="1px" width="360px" height="100px" cellspacing="0px">
<tr>
<td rowspan="2">a</td><!-- 合并行 -->
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<table border="1px" cellspacing="0">
<col width="100px" > <!-- 第一列宽度 -->
<col width="100px" > <!-- 第二列宽度 -->
<col width="100px" > <!-- 第三列宽度 -->
<col width="100px" > <!-- 第四列宽度 -->
<col width="100px" > <!-- 第五列宽度 -->
<col width="100px" > <!-- 第六列宽度 -->
<col width="200px" > <!-- 第七列宽度 -->
<tr height="50px" align="center">
<th colspan="7"> 个人简历</th>
</tr>
<tr height="50px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td><!-- 行合并 占四行位置 -->
</tr>
<tr height="50px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>电话</td>
<td></td>
<td >政治面貌</td>
<td colspan="3"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
<table border="px" bordercolor="#ffa500" width="1700px" height="975px" cellspacing="0px"
style="text-align: center;font-size:30px;border-collapse: collapse;">
<col width="202px">
<tr>
<!-- 1 -->
<th colspan="5" >逆战班学员介绍</th>
</tr>
<tr>
<!-- 2 -->
<td>您的大名</td>
<td width="404px"></td>
<td width="200px">贵庚</td>
<td width="404px"></td>
<td rowspan="5"></td>
</tr>
<tr>
<!-- 3 -->
<td>是否毕业</td>
<td width="404px"></td>
<td width="200px">专业是啥</td>
<td width="404px"></td>
</tr>
<tr>
<!-- 4 -->
<td>大学名称</td>
<td colspan="3"></td>
</tr>
<tr>
<!-- 5 -->
<td>从事过的工作</td>
<td colspan="3"></td>
</tr>
<tr>
<!-- 6 -->
<td>H5基础情况</td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<!-- 7 -->
<td>自我性格描述</td>
<td colspan="4"></td>
</tr>
<tr>
<!-- 8 -->
<td rowspan="2">简述1.目标规划 2.对H5的疑问 3.建议</td>
<td rowspan="2" colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<!-- 9 -->
<td colspan="2"></td>
</tr>
</table>
- border-collapse 属性(css属性):
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
separate：默认值，边框会分开，不会忽略 border-spacing 和 empty-cells 属性。
collapse：边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit:规定应该从父元素继承 border-collapse 属性的值。
为表格设置合并边框属性：
- table
{
border-collapse:collapse;
}