1 表格基本标签介绍
使用场景：在网页中以行和列的单元格的方式整齐展示和数据。如学生成绩表
代码：
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
table 是表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容
例题：
<p>成绩表1</p>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>60</td>
</tr>
</table>效果图：
2 表格相关属性
使用场景：设置表格基本展示效果
常见相关属性：
border 边框宽度
width 表格宽度
height 表格高度
注意：实际开发时针对样式效果推荐用CSS设置
例题：
<p>成绩表2</p>
<table border="1" width="200" height="100">
<tr>
<td>学号</td>
<td>姓名</td>
<td>成绩</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>60</td>
</tr>
</table>效果图：
3 表格标题和表头单元格标签
使用场景：在表格中表示整体大标题和一系列小标题
代码：
<caption>表格大标题</caption>
<th>表头单元格</th>
说明：
1 caption标签表示表格整体大标题，默认在表格整体顶部居中位置显示
2 th标签表示一系列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
注意：
1 caption标签书写在table标签内部
2 th标签写在tr标签内部（用于替换td标签）
例题：
<p>成绩表3</p>
<table border="1" width="200" height="100">
<caption>学生成绩表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>60</td>
</tr>
</table>效果图：
4 表格的结构标签（了解）
使用场景：让表格内部结构分组，突出表格的不同部分（头部、主体、尾部），使语义更加清晰
代码：
<thead>头部</thead>
<tbody>主体</tbody>
<tfoot>尾部</tfoot>
注意：
1 表格结构标签内部用于包裹tr标签
2 表格的结构标签可以省略
例题：
<p>成绩表4</p>
<table border="1" width="200" height="100">
<caption>学生成绩表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>60</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">整体成绩不错</td>
</tr>
</tfoot>
</table>效果图：
5 合并单元格
使用场景：将水平或垂直多个单元格合并成一个单元格
代码：
rowspan="合并单元格的个数" 合并行（上下合并）
colspan="合并单元格的个数" 合并列（左右合并）
说明：
1 合并行（上下合并） 保留最上行单元格，其他删除
2 合并列（左右合并） 保留最左列单元格，其他删除
注意：只有同一个结果标签中的单元格才能合并，不能跨结构标签合并（即不能跨thead、tbody、tfoot）
例题：
<p>表5-1</p>
<table border="1" width="300" height="100">
<caption>个人评语</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>彭于晏</td>
<td>男</td>
<td>很帅，很酷</td>
</tr>
<tr>
<td>我</td>
<td>男</td>
<td>很帅，很酷</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>理想男友</td>
<td>理想男友</td>
</tr>
</tfoot>
</table>
<p>表5-2</p>
<table border="1" width="300" height="100">
<caption>个人评语</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>彭于晏</td>
<td>男</td>
<td rowspan="2">我==彭于晏</td>
</tr>
<tr>
<td>我</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">理想男友</td>
</tr>
</tfoot>
</table>效果图：
