<colgroup>-列分组

<colgroup> 是 HTML 中用于对表格列进行分组的标签，通常与 <col> 标签配合使用。它允许开发者对表格中的列应用统一的样式或属性，而无需重复为每个单元格单独设置。

<colgroup> 的基本用法

<colgroup> 标签必须作为 <table> 元素的子元素出现，且位于 <caption>（如果有）之后、<thead>、<tbody> 或 <tr> 之前。一个简单的例子：

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
</table>

在这个例子中，前两列被分为一组，背景色设置为红色，第三列单独设置黄色背景。

<colgroup> 的属性

<colgroup> 支持以下主要属性：

1. span：指定该组包含的列数
2. style：为组内所有列设置CSS样式
3. class：为组应用CSS类

<table>
  <colgroup span="3" class="important-columns"></colgroup>
  <colgroup>
    <col style="width:100px">
    <col style="width:200px">
  </colgroup>
  <!-- 表格内容 -->
</table>

与 <col> 标签的配合

<colgroup> 可以包含多个 <col> 标签，每个 <col> 代表一列：

<table>
  <colgroup>
    <col span="2" style="background:#f0f0f0">
    <col style="background:#e0e0e0; width:150px">
  </colgroup>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
</table>

实际应用场景

表格列样式统一设置

<style>
  .price-column { background: #ffeb3b; text-align: right; }
  .highlight { background: #4caf50; color: white; }
</style>

<table>
  <colgroup>
    <col class="highlight">
    <col>
    <col class="price-column">
  </colgroup>
  <tr>
    <th>产品</th>
    <th>描述</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>手机</td>
    <td>智能手机</td>
    <td>2999</td>
  </tr>
</table>

响应式表格列控制

<style>
  @media (max-width: 600px) {
    colgroup .hide-on-mobile { display: none; }
  }
</style>

<table>
  <colgroup>
    <col>
    <col class="hide-on-mobile">
    <col>
  </colgroup>
  <!-- 表格行 -->
</table>

高级用法

多级列分组

<table>
  <colgroup span="3" style="background:#f5f5f5"></colgroup>
  <colgroup>
    <col span="2" style="background:#e0f7fa">
    <col style="background:#b2ebf2">
  </colgroup>
  <!-- 表格内容 -->
</table>

JavaScript动态操作

// 动态添加列分组
const table = document.querySelector('table');
const colgroup = document.createElement('colgroup');
colgroup.innerHTML = '<col style="width:20%"><col style="width:30%"><col style="width:50%">';
table.insertBefore(colgroup, table.firstChild);

// 修改现有列分组样式
document.querySelector('colgroup').style.backgroundColor = '#ffcdd2';

浏览器兼容性注意事项

虽然现代浏览器都支持 <colgroup>，但需要注意：

1. 某些CSS属性在列上可能表现不一致，如 border 属性
2. 列宽设置在不同浏览器中可能有细微差异
3. 伪类选择器如 :hover 不能直接应用于 <col> 元素

<!-- 这种hover效果不会生效 -->
<style>
  col:hover { background: red; } /* 无效 */
</style>

性能优化考虑

对于大型表格，使用 <colgroup> 可以显著提升性能：

<!-- 高效方式 -->
<table>
  <colgroup>
    <col style="width:100px">
    <col style="width:200px">
  </colgroup>
  <!-- 大量行数据 -->
</table>

<!-- 低效方式 -->
<table>
  <tr>
    <td style="width:100px">数据</td>
    <td style="width:200px">数据</td>
  </tr>
  <!-- 重复大量行 -->
</table>

与其他表格元素的交互

<colgroup> 的样式会与单元格样式叠加，后定义的样式优先级更高：

<table>
  <colgroup>
    <col style="background:blue; color:white">
  </colgroup>
  <tr>
    <td style="background:red">测试</td>
  </tr>
</table>

在这个例子中，单元格背景将是红色（覆盖了蓝色的列背景），但文字颜色保持白色（从列继承）。

打印样式中的应用

<style>
  @media print {
    colgroup .no-print { display: none; }
  }
</style>

<table>
  <colgroup>
    <col>
    <col class="no-print">
  </colgroup>
  <!-- 表格内容 -->
</table>

表格可访问性增强

虽然 <colgroup> 本身不直接影响可访问性，但可以配合ARIA属性使用：

<table>
  <colgroup aria-label="产品信息列">
    <col>
    <col>
  </colgroup>
  <!-- 表格内容 -->
</table>

与CSS Grid和Flexbox的对比

现代布局技术中，CSS Grid和Flexbox可以替代部分表格功能，但对于真正的表格数据，<colgroup> 仍有其优势：

<!-- 传统表格方式 -->
<table>
  <colgroup>
    <col style="width:30%">
    <col style="width:70%">
  </colgroup>
  <!-- 表格内容 -->
</table>

<!-- CSS Grid方式 -->
<div style="display:grid; grid-template-columns:30% 70%">
  <div>标题1</div>
  <div>标题2</div>
  <!-- 数据行 -->
</div>