![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=1739280016-yX0m2PKaazZs6aZ5SmJIlcjmtOEQ0gEG-0-e2168a689529f55cb2df5dfa19d317b0)
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=1739280016-B8DMukrQCsHNnIX9LqO6MUgtJZsgKh27-0-9d66ccb1f176cbcefc15bcd6e2626e02)
代码示例如下:
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-95.jpg?sign=1739280016-3pbYQ7sLYk1CmuHDKtnuUdpVy0CFwUv2-0-3769ab38124fc026162b0a91fb7ac5b7)
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-96.jpg?sign=1739280016-FOxBTjk2RAG0vKBT7XeY5GuypUvG9ip8-0-611bb7c765103b0db4fd0ca4b2948dc4)
执行代码,显示效果如图3-20所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-97.jpg?sign=1739280016-zKDiyIJPIzFPx9RWndJARSGXYSFV704f-0-15dce0b1ad705cbe7bcbe851172bd5c8)
图3-20 表格直列化的显示效果
如需对全部列应用样式,<colgroup>标签很有用,这样就不需要对各个单元和各行重复应用样式了。
注意:<colgroup>标签只能在<table>中使用。