<col>-列属性

<col> 标签用于定义表格中一个或多个列的属性，通常与 <colgroup> 配合使用。它不直接包含内容，而是通过样式或属性影响整列的表现形式，比如宽度、背景色等。

<col> 的基本用法

<col> 必须嵌套在 <colgroup> 内，且是空元素（无需闭合标签）。一个典型的结构如下：

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col span="2" style="width: 100px;">
  </colgroup>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
</table>

效果：

核心属性

span 属性

定义 <col> 影响的列数，默认值为1。例如：

<colgroup>
  <col span="3" style="background-color: #f0f0f0;">
</colgroup>

这会为前3列添加灰色背景。

style 或 class

通过内联样式或CSS类控制列样式：

<style>
  .highlight { background-color: #ffeb3b; }
</style>
<colgroup>
  <col class="highlight">
  <col style="width: 20%;">
</colgroup>

实际应用场景

固定列宽

结合 width 属性实现响应式布局：

<colgroup>
  <col style="width: 150px; min-width: 150px;">
  <col style="width: 30%;">
</colgroup>

斑马线表格

交替列颜色：

<colgroup>
  <col style="background: #f9f9f9;">
  <col style="background: #fff;">
  <col style="background: #f9f9f9;">
</colgroup>

注意事项

1. 优先级问题：<col> 的样式会被单元格（<td>/<th>）的内联样式覆盖：

   <col style="color: red;">
   <td style="color: blue;">文字仍为蓝色</td>
   

2. 跨列合并：<col> 不能替代 colspan，它仅用于样式控制：

   <!-- 错误示例 -->
   <col span="2"> <!-- 不能实现单元格合并 -->
   

3. 动态修改：通过JavaScript操作 <col>：

   document.querySelector('col').style.backgroundColor = 'green';
   

兼容性与替代方案

旧版浏览器可能对 <col> 的支持不完整。替代方案是直接为单元格添加类：

<tr>
  <td class="column-1">内容</td>
  <td class="column-2">内容</td>
</tr>

高级技巧

配合 nth-child 选择器

当 <col> 无法满足复杂需求时，改用CSS：

td:nth-child(2n) { background: #f5f5f5; }

打印优化

控制打印时的列分页：

<col style="page-break-inside: avoid;">

与其他标签的协作

<col> 常与以下标签配合：

• <colgroup>：定义列组
• <table>：主容器
• <caption>：表格标题

示例：

<table>
  <caption>销售数据</caption>
  <colgroup>
    <col style="width: 50%;">
    <col style="width: 25%;">
    <col style="width: 25%;">
  </colgroup>
  <thead>
    <tr><th>产品</th><th>销量</th><th>收入</th></tr>
  </thead>
</table>