HTML
<col>标签：高效定义表格列样式
理解 <col> 标签的作用及其在表格结构中的定位
掌握 <col> 与 <colgroup> 的配合使用方式
学会通过 span 属性批量控制多列样式
区分 HTML5 支持与已废弃的属性，坚持使用 CSS 进行样式控制
能够编写语义清晰、维护性高的表格列定义
<col> 标签<col>（Column）标签用于定义 HTML 表格中一列或多列的公共属性。它本身不显示内容，而是作为“样式模板”，作用于对应位置的 <th> 和 <td> 单元格。
关键特性
无闭合标签：<col> 是自闭合标签（如 <col />）
必须嵌套在 <colgroup> 中
不能直接放在 <table> 下
仅影响视觉样式和布局，不影响数据内容
使用
<col>可避免为每一列的每个单元格重复写样式，提升代码简洁性与可维护性。
<table>
<colgroup>
<col style="background-color: #e6f7ff;" />
<col style="background-color: #fff7e6;" />
<col />
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr>
<td>李明</td>
<td>22</td>
<td>计算机科学</td>
</tr>
</tbody>
</table>上例中：
第一列所有单元格背景为浅蓝色
第二列为浅橙色
第三列无特殊样式
注意：虽然
style属性仍可用，但最佳实践是使用class配合外部 CSS。
以下属性在 HTML5 中已被移除，必须用 CSS 替代：
已过时
<col align="center" width="100" bgcolor="#f0f0f0">CSS 控制
<style>
.name-col { width: 120px; }
.age-col { width: 80px; text-align: center; }
.dept-col { background-color: #f9f9f9; }
</style>
<colgroup>
<col class="name-col" />
<col class="age-col" />
<col class="dept-col" />
</colgroup>span 批量设置多列<table>
<colgroup>
<!-- 前两列统一宽度 -->
<col span="2" style="width: 100px;" />
<!-- 后三列共享背景色 -->
<col span="3" style="background-color: #f0f8ff;" />
</colgroup>
<tr>
<th>ID</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>001</td>
<td>张伟</td>
<td>92</td>
<td>88</td>
<td>95</td>
</tr>
</table>
span="2"表示该<col>定义适用于第 1 和第 2 列。
<head>
<style>
.fixed-col { width: 100px; }
.flex-col { width: auto; min-width: 150px; }
@media (max-width: 600px) {
.fixed-col { width: 80px; }
.flex-col { min-width: 120px; }
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="fixed-col" />
<col class="flex-col" />
<col class="fixed-col" />
</colgroup>
<!-- 表格内容 -->
</table>
</body>如果一个 <colgroup> 中定义了 2 个 <col>，但表格有 5 列，其余 3 列会如何表现？
能否通过 <col> 设置某一列中所有 <td> 的字体颜色？为什么？
在动态生成表格时（如从 JSON 渲染），如何根据数据自动创建对应的 <col> 定义？