知识目标
- 掌握表格标签的语法与使用
- 掌握使用rowspan、colspan属性实现不规则表格
- 掌握使用border、width、height属性进行表格外观设计
1. 表格标签的语法与使用
说到表格，大家并不陌生吧？？网页中也很常见，用来做数据的展示。如下，比比皆是。
那在网页中怎么生成表格呢？首先看表格组成：
1.1 表格标签的语法
1.2 表格标签的使用
在 HTML 中创建表格，通常分为以下 3 步：
- 创建表格标签
<table>……</table>。 - 在表格标签
<table>……</table>中创建行标签<tr>……</tr>，可以有多行。 在行标签 <tr>……</tr>中创建单元格标签<td>……</td>，需要多少个单元个就创建多少个。
为了显示表格的轮廓，通常还需要设置 table 标签的 border 属性，通过 border属性来设置表格边框的宽度。
1.3 表格标签<table>属性
1.4 基本使用案例演示
如下展示了表格的基本使用，左边是没有设置边框的，右边的设置了border边框。
注意：<tr>标签中只能嵌套<td>标签，不可以在<tr>标签中输入文字。但是<td>里可以嵌套各种标签，包括文字/图像/视频等
2. 表格标签—表格结构标签
2.1 表格结构标签作用
如果想需要表格有点样式，比如着重强调表头，可以使用<thead>标签。
2.2 表格结构说明
表格结构说明如下图所示：
2.3 案例演示
3. 使用rowspan、colspan合并单元格
表格可以实现行列合并，只需在 td 中加入rowspan 或 colspan 属性，colspan表示跨越的列数，rowspan表示跨越的行数。
3.1 跨列colspan
跨列是指单元格的横向合并，实现单元格在水平方向上跨多列。col 为 column（列）的缩写，span 为跨度，所以 colspan 意思为跨列。
3.1.1 跨列合并操作语法
<table>
<tr>
<td colspan=“所跨的列数”> 单元格内容 </td>
</tr>
</table>
3.1.2 跨列合并步骤
在开始要合并的单元格处（td），添加上colspan属性。如果要跨4列，则值为4，此时应将后面多余的td进行删除。如下案例，前面合并了四列，此时多余的3个td进行了删除。
3.2 跨行rowspan
跨行是指单元格在垂直方向上合并。row 为行的意思，rowspan 即跨行。
3.2.1 跨列合并操作语法
<table>
<tr>
<td rowspan=“所跨的行数”> 单元格内容 </td>
</tr>
<table>
3.2.2 跨行合并步骤
步骤同跨列合并，只需在开始的单元格td增加rowspan属性；然后删除多余的行（后面的行tr里的td）。
3.3 跨行跨列步骤总结
表格跨行与跨列的应用思路要清晰，可以参考以下步骤：
（1）根据需求设计出完整的表格。
（2）根据需求选择要合并的单元格，设置合并单元格中的第一个单元格的跨行或跨列属性，如 colspan=“2”或 rowspan=“3”等。
（3）删除被合并的其他单元格，跨列则水平删除其他多余的单元格，跨行则垂直删除其他多余的单元格。
