![Web前端学习笔记:HTML5+CSS3+JavaScript](https://wfqqreader-1252317822.image.myqcloud.com/cover/365/31304365/b_31304365.jpg)
上QQ阅读APP看书,第一时间看更新
3.4 表格的结构化与直列化
为了更好地管理及格式化表格,更好地语义化标签,需要掌握表格的结构化与直列化。
3.4.1 表格的结构化
表格的结构化就是将表格分为表头、表体、表尾三部分,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作。
一个完整的表格通常包括以下四部分:
1)caption:表格的标题,通常出现在表格的顶部。
2)thead:定义表格表头,通常表现为标题行。
3)tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组。
4)tfoot:定义表格的脚尾,通常表现为总计行。
基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-92.jpg?sign=1738882326-UvL0U7wq1Z9NlIbRVluH1ZQWz9IVIUx2-0-cb57de6328c0cdad3ee12cd5a296ff14)
tbody包含行的内容下载完优先显示,不必等待表格结束。另外,还需要注意表格行本来是从上向下显示的,但是应用了<thead><tbody><tfoot>以后,就“从头到脚”显示,即不管行代码顺序如何,即使<thead>写在了<tbody>的后面,网页显示时,还是先<thead>后<tbody>显示。
3.4.2 表格的直列化
通过设置表格的直列化可以对表格的列进行分组,以便对其进行格式化。
基本语法如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-94.jpg?sign=1738882326-baPYzTj7C1UEncVGetA9Qxy62dO6305z-0-94c5997eb7e3779440469bc1db34c128)
代码示例如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-95.jpg?sign=1738882326-t1qnfwH7kKz81pYK70KJDUSI9oGWl82a-0-ba0bf06fb761d611bb4e253c8c080267)
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-96.jpg?sign=1738882326-ppM6NzbhYisKCLdW4zROvdTm2CcaB9wO-0-5cba1ccd981cc4dbae4191ee3d6ff04d)
执行代码,显示效果如图3-20所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-97.jpg?sign=1738882326-7JmLKnG6bwEng0hAYuLMTn0lwgah8uCY-0-22afdc25f1ae9679837a8cf064bc0fb7)
图3-20 表格直列化的显示效果
如需对全部列应用样式,<colgroup>标签很有用,这样就不需要对各个单元和各行重复应用样式了。
注意:<colgroup>标签只能在<table>中使用。