《HTML+CSS+JavaScript》之第6章 表格
- 6.1 表格简介
- 6.2 基本结构
- 6.3 完整结构
- 6.3.1 表格标题：caption
- 6.3.2 表头单元格：th
- 6.4 语义化
- 6.5 合并行：rowspan
- 6.6 合并列：colspan
6.1 表格简介
表格可以更清晰地排列数据。
6.2 基本结构
3部分组成：
- 表格：table标签。
- 行：tr标签。table row
- 单元格：td标签。table data cell
表格默认无边框。
表格基本结构
| HTML |
CSS |
| JavaScript |
jQuery |
6.3 完整结构
6.3.1 表格标题：caption
caption标签实现表格标题，只有一个，默认位于表格第一行。
表格标题
考试成绩表
| 小明 |
80 |
80 |
80 |
| 小红 |
90 |
90 |
90 |
| 小杰 |
100 |
100 |
100 |
6.3.2 表头单元格：th
表头单元格：table header cell
表行单元格：table data cell
- 浏览器会粗体和居中显示th标签内容。
- th用于表头，td用于表行。
表格标题
| 表头单元格1
表头单元格2
|
| 表行单元格1 |
表行单元格2 |
| 表行单元格3 |
表行单元格4 |
表头单元格
考试成绩表
| 姓名 |
语文 |
英语 |
数学 |
| 小明 |
80 |
80 |
80 |
| 小红 |
90 |
90 |
90 |
| 小杰 |
100 |
100 |
100 |
6.4 语义化
thead、tbody和tfoot将表格划分为3部分：表头、表身、表脚，使代码更具有语义，方便分块控制表格CSS样式，根据需要使用。
tfoot往往用于统计数据。
表格标题
| 表头单元格1
表头单元格2
|
| 表行单元格1 |
表行单元格2 |
| 表行单元格3 |
表行单元格4 |
| 标准单元格5 |
标准单元格6 |
表格语义化
考试成绩表
| 姓名 |
语文 |
英语 |
数学 |
| 小明 |
80 |
80 |
80 |
| 小红 |
90 |
90 |
90 |
| 小杰 |
100 |
100 |
100 |
| 平均 |
90 |
90 |
90 |
6.5 合并行：rowspan
将纵向的N个单元格合并。
|
rowspan属性
6.6 合并列：colspan
将横向的N个单元格合并。
|
colspan属性
| 前端开发技术 |
| HTML |
CSS |
| JavaScript |
jQuery |
