HTML学习笔记(四)表格标签
表格标签
表格标签用来组织和管理数据
表格标签的应用场景
创建表格
在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格基本标签如下:
- ...
:定义一个表格
- ... :定义表格行,必须嵌套...
标签内,有几个tr,代表有几行
- ... :定义表格单元格,必须嵌套在... 标签内,一对... 中包含几对... ,就表示该行中有多少列(或多少个单元格)。
- ... :定义表格列标题(表头)
- ... :定义表格标题
注意:
- 中只能嵌套 ,
- 标签,他就像一个容器,可以容纳所有的元素
代码演示:
表格演示
我是表格标题
我是第一列表头
我是第二列表头
我是第三列表头
我是第一行第一格
我是第一行第二格
我是第一行第三格
我是第二行第一格
我是第二行第二格
我是第二行第三格
我是第三行第一格
我是第三行第二格
我是第三行第三格
浏览器显示:
表格属性
代码演示:
表格演示
我是表格标题
我是第一列表头
我是第二列表头
我是第三列表头
我是第一行第一格
我是第一行第二格
我是第一行第三格
我是第二行第一格
我是第二行第二格
我是第二行第三格
我是第三行第一格
我是第三行第二格
我是第三行第三格
浏览器显示:
合并单元格
- 跨行合并:rowspan
- 跨列合并:colspan
注意事项:
将多个单元格合并的时候,就会有多余的单元格,把它删除。例如:把 3个td合并成一个,那就多余了2个td,需要删除。
代码演示:
表格演示
我是表格标题
我是第一列表头
我是第二列表头
我是第三列表头
我是第一行第一格,我要跨行和第二行第一格合并
我是第一行第二格,我要跨列和第一行第三格合并
我是第二行第二格
我是第二行第三格
我是第三行第一格
我是第三行第二格
我是第三行第三格
浏览器显示:
表格分组
为了方便数据的阅读和检索,有时需要对表格进行分组,HTML中提供了5个数据表分组标签,如下:
表格行分组:
...:表格头,定义表格头部区域;
...:表格主体,定义表格主体区域;
...:表格脚,定义表格脚部区域;
表格列分组:
...:表格列,定义表格列区域;
... :表格列组,定义表格列组;
代码演示:
表格演示
表格分组
表格分组
排名
校名
总得分
人才培养
科学研究
分省排名
学校类型
得分
研究生培养
本科生培养
得分
自然科学研究
社会科学研究
汇总
200
200
200
200
200
200
200
0
0
0
1
清华大学
296.77
128.92
128.92
128.92
128.92
128.92
128.92
京
1
理工
1
清华大学
296.77
128.92
128.92
128.92
128.92
128.92
128.92
京
1
理工
1
清华大学
296.77
128.92
128.92
128.92
128.92
128.92
128.92
京
1
理工
浏览器显示: