48. 列分组 col 与 colgroup

本节目标：学会用 colgroup 和 col 批量设置整列样式，理解这种写法的优势和限制。

前面学的样式都是加在 td 或 th 上。如果想让整列统一设置样式，逐个格子加太麻烦。colgroup 和 col 就是干这个的。

colgroup 和 col

<colgroup>：列分组的容器
<col>：定义一列或多列的样式

colgroup 必须紧接在 table 开始标签之后（如果有 caption，则在 caption 下面）。

<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col style="background-color: #e0e0e0;">
    <col style="background-color: #f0f0f0;">
  </colgroup>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
</table>

每个 col 对应表格的一列。上面例子中三列分别设置了不同的背景色。

span 属性：批量应用

如果连续多列要同样的样式，用 span 属性：

<colgroup>
  <col>  <!-- 第一列：默认样式 -->
  <col span="3" style="background-color: yellow;">  <!-- 第2到4列 -->
  <col style="background-color: pink;">  <!-- 第5列 -->
</colgroup>

span 指定 col 覆盖多少列，效果等同于写多个 col。

不需要样式也要占位

如果想给第二列设置样式，第一列也要写一个空的 col：

<colgroup>
  <col>  <!-- 第一列：空的占位 -->
  <col style="background-color: yellow;">  <!-- 第二列：有样式 -->
</colgroup>

否则样式会应用到第一列上。

列样式限制

Important

col 只能设置有限的几个 CSS 属性：

border

background

width

visibility

其他属性（如 color、font-size、text-align）必须设置在 td 或 th 上。

实际应用场景

给表格加竖条纹：

<style>
  col:nth-child(odd) {
    background-color: #f2f2f2;
  }
  col:nth-child(even) {
    background-color: #ffffff;
  }
</style>

<table>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <!-- 表格内容 -->
</table>

设置列宽：

<colgroup>
  <col style="width: 20%;">   <!-- 姓名列 20% -->
  <col style="width: 50%;">   <!-- 地址列 50% -->
  <col style="width: 30%;">   <!-- 电话列 30% -->
</colgroup>

colgroup 和 CSS 选择器的对比

colgroup 的写法：

<colgroup>
  <col class="name-col">
  <col class="addr-col">
</colgroup>

纯 CSS 的替代方案：

td:nth-child(1), th:nth-child(1) { /* 第一列 */ }
td:nth-child(2), th:nth-child(2) { /* 第二列 */ }

Tip

现代开发中，用 CSS :nth-child() 选择器更灵活。colgroup 适合需要兼容旧浏览器或处理 border、background 等有限属性的场景。

小结

colgroup 包裹 col，定义列样式
span 属性可以批量设置多列
列样式有限制（border、background、width、visibility）
不设置样式的列也要写空 col 占位

下一节，我们学习表格的可访问性。