<col>-列属性

<col> 标签用于定义表格中一个或多个列的属性。它通常作为 <colgroup> 的子元素出现，用于批量设置列的样式或行为，而无需重复操作每个单元格。

<col> 的基本用法

<col> 是一个空元素，不需要闭合标签。它通过 span 属性控制影响的列数，默认值为 1。以下示例定义了一个三列表格，并为第二列设置背景色：

<table border="1">
  <colgroup>
    <col>
    <col style="background-color:yellow">
    <col>
  </colgroup>
  <tr>
    <td>苹果</td>
    <td>香蕉</td>
    <td>橙子</td>
  </tr>
</table>

控制多列的 span 属性

当需要让属性作用于连续多列时，可以使用 span 属性替代重复定义多个 <col>。下面两种写法效果相同：

<!-- 写法一：重复定义 -->
<colgroup>
  <col style="width:100px">
  <col style="width:100px">
  <col style="width:100px">
</colgroup>

<!-- 写法二：使用 span -->
<colgroup>
  <col style="width:100px" span="3">
</colgroup>

样式优先级规则

通过 <col> 设置的样式具有特定优先级：

1. 单元格直接样式（最高优先级）
2. <col> 或 <colgroup> 样式
3. 表格全局样式

<table>
  <colgroup>
    <col style="color:blue">
  </colgroup>
  <tr>
    <td style="color:red">这个文本是红色</td>
    <td>这个文本是蓝色</td>
  </tr>
</table>

实际应用场景

固定列宽布局

结合 width 属性创建固定宽度的表格列：

<table border="1" style="width:100%">
  <colgroup>
    <col style="width:20%">
    <col style="width:50%">
    <col style="width:30%">
  </colgroup>
  <tr>
    <td>ID</td>
    <td>商品名称</td>
    <td>价格</td>
  </tr>
</table>

斑马纹表格

使用 nth-child 伪类实现交替列颜色：

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

<table>
  <colgroup>
    <col span="3">
  </colgroup>
  <!-- 表格内容 -->
</table>

浏览器兼容性注意事项

虽然现代浏览器普遍支持 <col>，但某些样式限制需要注意：

• 部分浏览器不支持 border 属性
• background 在某些旧版本IE中表现不一致
• 推荐使用内联样式或CSS类替代直接属性

<!-- 推荐写法 -->
<colgroup>
  <col class="highlight-column">
</colgroup>

<style>
  .highlight-column {
    background-color: #ffeb3b;
    width: 200px;
  }
</style>

与 <colgroup> 的配合使用

<colgroup> 作为容器可以包含多个 <col> 元素，同时本身也可以直接定义属性：

<table>
  <!-- 单独使用 colgroup -->
  <colgroup style="background:#f1f1f1" span="2"></colgroup>
  
  <!-- 混合使用 -->
  <colgroup>
    <col span="2" style="width:100px">
    <col style="width:200px">
  </colgroup>
</table>

动态修改列属性

通过JavaScript可以动态调整列设置：

<table id="dataTable">
  <colgroup id="tableCols">
    <col id="col1">
    <col id="col2">
  </colgroup>
  <!-- 表格内容 -->
</table>

<script>
  document.getElementById('col1').style.width = '150px';
  document.querySelector('col:nth-child(2)').classList.add('active');
</script>

响应式设计中的应用

结合媒体查询调整列布局：

@media screen and (max-width: 600px) {
  col.responsive {
    display: none;
  }
}

<colgroup>
  <col class="responsive">
  <col>
</colgroup>

特殊属性支持

除了通用属性外，<col> 还支持一些特殊属性：

<col span="2" width="150" align="center" valign="middle">

注意：HTML5已废弃 width、align 等属性，建议改用CSS：

col {
  width: 150px;
  text-align: center;
  vertical-align: middle;
}

表格列分组的高级用法

通过多个 <colgroup> 实现复杂的分组样式：

<table>
  <colgroup span="2" style="background:#eee"></colgroup>
  <colgroup style="background:#eef"></colgroup>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

打印样式优化

为打印媒体专门设置列样式：

@media print {
  col.print-hide {
    visibility: collapse;
  }
  col.print-bold {
    font-weight: bold;
  }
}

<colgroup>
  <col class="print-bold">
  <col class="print-hide">
</colgroup>

与 ARIA 属性的结合

增强表格的可访问性：

<colgroup aria-label="价格信息">
  <col aria-label="原价">
  <col aria-label="折扣价">
</colgroup>