colgroup 与 col

对列进行分组与统一样式控制

概念说明

colgroup 与 col 用于对列进行分组并设置宽度或样式，常用于大表格中统一控制列的样式。

直白理解：colgroup 是可选的，不用也能正常显示。列宽与合并列可以在 th/td 上完成，但当你需要“整列统一控制”时，colgroup 更干净。

常见坑：col 只能影响少量与列相关的样式（如 width、background），并不能可靠地控制单元格的 padding、text-align 等属性。需要更细的样式时应直接给 th/td 设置类名。

colgroup：列分组容器
col：具体列，可使用 span 合并多列

基础语法

<colgroup>
  <col class="col-accent" />
  <col span="2" class="col-muted" />
</colgroup>

演示

列样式分组

型号	颜色	材质	库存
MX-01	黑	铝合金	120
MX-02	灰	镁合金	85
MX-03	蓝	碳纤维	64

colgroup 常用于设置列宽、背景色或强调关键列。

<table>
  <colgroup>
    <col class="col-accent" />
    <col span="2" class="col-muted" />
    <col />
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>