HTML基础知识（8）

表格标签

1.1.1表格的基本标签

Ø 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
Ø 基本标签：

Ø 注意点：
• 标签的嵌套关系：table > tr > td

代码：

<table>
  <tr>
<td></td>
</tr>
</table>

 2.1.1表格属性

Ø 场景：设置表格基本展示效果
Ø 常见相关属性

Ø 注意点：
• 实际开发时针对于样式效果推荐用CSS设置

3.1.1表格的标题和表头单元格标签

Ø 场景：在表格中表示整体大标题和一列小标题
Ø 其他标签：

Ø 注意点：
• caption标签书写在table标签内部
• th标签书写在tr标签内部（用于替换td标签）

代码：

<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格</th>
<td>表内容</td>
</tr>
</table>

4.1.1表格的结构标签

Ø 场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
Ø 结构标签：

Ø 注意点：
• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略

5.1.1合并单元格

Ø 场景：将水平或垂直多个单元格合并成一个单元格

Ø 合并单元格步骤：
1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

代码:

<table>
<tr>
<td>表格内容</td>
<td rowspan>表格内容</td>
<td>表格内容</td>
</tr>
</th>
<th>
<tr>
<td>表格内容</td>

<td>表格内容</td>
</tr>
</table>