零基础教你学前端——24、表格标题和结构分组

这节课，我们学习表格的标题，行分组和列分组等有用的标签。

表格标题，顾名思义，就是一个表格的大标题，默认情况下位于表格顶部水平居中位置。

标签名为 caption 译为 说明文字。它是一个双标签，语法为：<caption></caption>) 。标签里面放置标题的文本，它是 table 标签的子标签，一般习惯放置在第一个 tr 标签之前。

该案例中的，表格标题 “阿里职级薪资”，就是使用 caption 标签实现的。

按照惯例，表格的所有行均需要使用 tr 标签实现。我们仔细观察表格的这些行——第一行和第二行可以看做是表格的头部区域，中间5行可以看做是表格的主体区域，最后一行可以看做表格的脚部区域，那能不能使用一些标签来把这些 tr 行分成三组呢？是可以的！这就需要三个行分组标签 thead、tbody、tfoot，分别表示表格头、表格体和表格尾

行分组标签均为双标签，thead 标签是 table head 简写，译为表格头。基本语法为：<thead></thead> thead 是 table 标签的子标签，标签里面放置对应的表格头部 tr 行内容。

例如，当前表格案例中的前两行内容，就是使用 thead 标签实现的。

tbody 标签是 table body 的简写，译为表格体，基本语法为，<tbody></tbody> tbody 标签也是 table 标签的子标签，与 thead 标签同级，标签里面放置对应的表格主体部分 tr 行内容。

例如，当前案例中具体的岗位职级信息，就是使用 tbody 标签实现的。

tfoot 标签是 table foot 的简写，译为表格脚。基本语法为：<tfoot></tfoot> 同样是 table 标签的子标签，与 thead tbody 同级，标签里面放置对应的表格脚部 tr 行内容。

案例中的最后一行 说明，就是使用 tfoot 标签实现的。

了解了表格的标题标签和分组标签的语义和语法后，我们就来完成这个案例。

这是一个由 8 行 7 列组成的表格，表格在页面中居中显示。

打开编辑器，创建一个 group_table.html 页面，补全基本代码。在 body 里编写 Emmet语句：(table>tr8>td7{内容} ) 把表格撑开便于观察。生成表格基本代码，给 table 定义width属性，宽度为600；定义 border属性，边框宽度为 1 ；最后定义align属性，值为center，居中对齐。保存文件。

用浏览器打开页面，基础的表格做好了！

案例中序号占据了两行位置，需要垂直合并单元格，技术岗与管理岗的职级薪资和说明占据了第2列到第7列的位置，需要水平合并单元格。

回到编辑器，找到第一行第一个单元格 td，给它定义 rowspan 属性，值设置为2。因为做了行的合并，需要删除第二行的第一个单元格。

再找到第一行第二个单元格 td，为其定义 colspan 属性，值设置为6。同时也把该行中的被合并的单元格删除。

再找到最后一行，给第二个td 添加 colspan 属性，值设置为 6。同时也把该行中的被合并的单元格删除。保存。

回到浏览器，刷新，三个单元格合并成功。

接下来为表格添加标题和实现行的分组。

回到编辑器，此时代码里并没有添加行分组标签。

回到浏览器，右键，检查，点击元素监测按钮，再选中表格，在 Elements 元素查看窗口里，看到了 table 标签，点击左侧的三角，展开 table，神奇的一幕发生了：在没有使用任何分组标签的前提下，表格的结构多出了一层 tbody 标签。

在这里需要提醒大家：表格如果没有使用任何分组标签，浏览器在渲染时，会把 table 中，所有未分组的 tr 放在一个 tbody 标签里面。因此，为了使表格行，内容语义化更强，我们手动为表格添加一些分组标签。

回到编辑器，在 table 内部，第一个 tr 之前，回车，添加 caption 标签，把标题内容放在 caption标签内部。保存。

回到浏览器，刷新，表格的标题做好了。

回到编辑器，在 table 内部，第一个 tr 之前，回车，添加 caption 标签，把标题内容放在 caption标签内部。保存。

回到浏览器，刷新，表格的标题做好了。

回到编辑器，在 table 内部，第一个 tr 之前，回车，添加 caption 标签，把标题内容放在 caption标签内部。保存。

回到浏览器，刷新，表格的标题做好了。

继续为表格添加行分组标签。

回到编辑器，在 caption 标签的结束位置，添加 thead、tbody、tfoot三组标签。把前面的两行移动到 thead 标签内部，为了使文字加粗居中显示，需要将 thead 中的全部 td 换成 th。 可以按住alt+鼠标左键操作光标。

最后一行放置到 tfoot 标签内部，将第一行第一个 td 换成 th。

剩余的行移动到 tbody 标签中。

注意一点，W3C的标准约定，表格的行分组标签，一个表格只允许使用一个 thead 和一个tfoot，但是允许使用多个 tbody。

如果此时文档缩进和对齐有些错乱，可以在编辑器中点击鼠标右键 ，选择格式化文档，保存。

回到浏览器，页面效果没有任何变化，我们再次查看浏览器渲染完成的元素结构，能清楚的看到表格已经进行了分组。

回到编辑器，我们把单元格中对应的文本都填写好，这里有个小技巧：首先选中内容，然后按ctrl+d 就可以实现多光标操作。

为了使表格主体部分的文本在单元格里居中显示，我们需要给 tbody 里的每一个 tr 定义 align 属性值为 center align="center" 。保存。

回到浏览器，刷新，表格的效果基本上都呈现了！

其实，表格除了行可以分组外，列也可以分组。

列分组标签是 colgroup，是 column group 的缩写。该标签作用是把一列或者连续的几列分成一组，进行不同属性的修饰。列分组经常用于定义表格一整列单元格的颜色。

他的基本语法是： <colgroup></colgroup> 该标签可以定义一个 span 属性，取值为一个数值，含义为多少列分成一组。 (<colgroup span=""></colgroup>) 如果需要划分多组，则需要使用多个 colgroup 标签。

回到编辑器，在 caption 标签的结束位置，回车，添加 colgroup 标签。给它定义一个 span属性，取值设置为1 ；再为该标签添加一个 bgcolor 属性，值设置为 #91C5D4 (这里原样读出) 。这里的颜色值的定义我们下一节学习。保存。

继续为表格添加其他的背景颜色。

返回编辑器，再给 table 标签添加 bgcolor属性，定义整个table的背景颜色。保存。

回到浏览器，刷新。除了第一列，表格其他列的背景颜色变成了淡蓝色。

案例中，边框线颜色为白色。

回到编辑器，给 table 再定义 cellpadding 等于0， (cellpadding="0") 定义 cellspacing 等于 0， (cellspacing="0") 最后定义 bordercolor 属性，值设置成白色。

再给第一行 tr 定义 bgcolor 属 性，设置好颜色值。给第二行 tr 定义 bgcolor属性，设置好颜色值。再给最后一整行定义背景色，给最后一行的第一个单元格定义背景色。保存。

回到浏览器，刷新，案例的所有效果全部实现了！

文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=25