- Web前端学习笔记:HTML5+CSS3+JavaScript
- 王涛 杨延成 姜浩
- 492字
- 2025-02-18 03:24:16
3.4 表格的结构化与直列化
为了更好地管理及格式化表格,更好地语义化标签,需要掌握表格的结构化与直列化。
3.4.1 表格的结构化
表格的结构化就是将表格分为表头、表体、表尾三部分,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作。
一个完整的表格通常包括以下四部分:
1)caption:表格的标题,通常出现在表格的顶部。
2)thead:定义表格表头,通常表现为标题行。
3)tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组。
4)tfoot:定义表格的脚尾,通常表现为总计行。
基本语法如下:

tbody包含行的内容下载完优先显示,不必等待表格结束。另外,还需要注意表格行本来是从上向下显示的,但是应用了<thead><tbody><tfoot>以后,就“从头到脚”显示,即不管行代码顺序如何,即使<thead>写在了<tbody>的后面,网页显示时,还是先<thead>后<tbody>显示。
3.4.2 表格的直列化
通过设置表格的直列化可以对表格的列进行分组,以便对其进行格式化。
基本语法如下:

代码示例如下:


执行代码,显示效果如图3-20所示。

图3-20 表格直列化的显示效果
如需对全部列应用样式,<colgroup>标签很有用,这样就不需要对各个单元和各行重复应用样式了。
注意:<colgroup>标签只能在<table>中使用。