目录
1.表格标签介绍
- 用途(场景):在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
- 基本标签:
标签名
说明
table
表格整体,可用于包裹多个 tr
tr
表格每行,可用于包裹 td
td
表格单元格,可用于包裹内容
注意点:标签的嵌套关系:table > tr > td
2. 表格相关属性
- 用途(场景):设置表格基本展示效果
- 常见相关属性:
属性名
属性值
效果
border
数字
边框宽度
width
数字
表格宽度
height
数字
表格高度
cellspacing
数字
单元之间的空间
cellpadding
数字
单元边沿与单元内容之间的空间
- 注意点:实际开发时针对于样式效果推荐用 CSS 设置
3. 表格标题和表头单元格标签
- 用途(场景):在表格中表示整体大标题和一列小标题
- 其他标签:
标签名
名称
说明
caption
表格大标题
表示表格整体大标题,默认在表格整体顶部居中位置显示
th
表头单元格
表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示
- 注意点:
caption 标签书写在 table 标签内部
th 标签书写在 tr 标签内部(用于替换 td 标签)
4. 表格的结构标签(了解)
- 用途(场景):让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰
- 结构标签:
标签名
名称
thead
表格头部
tbody
表格主体
tfoot
表格底部
- 注意点:
表格结构标签内部用于包裹 tr 标签
表格的结构标签可以省略
5. 合并单元格
- 用途(场景):将水平或垂直多个单元格合并成一个单元格
- 分类:跨行合并(垂直合并成一个)和跨列合并(水平合并成一个)
- 合并单元格步骤(代码实现):
a.明确合并哪几个单元格
b.通过左上原则,确定保留谁删除谁
上下合并→只保留最上的,删除其他
左右合并→只保留最左的,删除其他
c.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
属性名
属性值
说明
rowspan
合并单元格的个数
跨行合并,将多行的单元格垂直合并
colspan
合并单元格的个数
跨列合并,将多列的单元格水平合并
- 注意点:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot )
6.综合案例——学生信息表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300">
<caption><h3>学生信息表格</h3></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>小甲</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>小艺</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们很优秀</td>
</tr>
</table>
</body>
</html>