HTML表格列元素如何设置样式
在HTML表格开发中，我们经常会遇到需要为整列设置统一样式的场景，比如让某一列的所有单元格背景色不同、文字居中对齐等。如果逐个为列中的每个<td>设置样式会非常繁琐，这时候就可以使用<col>和<colgroup>元素来批量控制列样式，提升开发效率。
col和colgroup元素的基本介绍
<colgroup>标签用于定义表格中的一组列，它可以包含一个或多个<col>子元素，每个<col>元素对应表格中的一列（或一组列，通过span属性设置）。这两个元素需要放在<table>标签内部，且在所有<thead>、<tbody>、<tfoot>、<tr>元素之前。
需要注意的是，<col>和<colgroup>元素本身不会在页面上渲染出可见的内容，它们的核心作用就是为对应的列批量应用样式，而且支持的样式属性有限，通常仅支持与背景、边框、宽度相关的部分CSS属性，比如background-color、border、width等，文字相关的样式（如color、text-align）通常无法直接通过这两个元素设置，需要为列内的<td>或<th>设置。
基础用法示例
下面是一个简单的表格示例，我们通过<colgroup>和<col>为不同列设置不同的背景色和宽度：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>col元素样式设置示例</title>
<style>
table {
border-collapse: collapse;
width: 500px;
}
th, td {
border: 1px solid #333;
padding: 8px;
}
/* 为col元素设置样式 */
.col-name {
width: 120px;
background-color: #e8f4ff;
}
.col-age {
width: 80px;
background-color: #fff3e8;
}
.col-score {
width: 100px;
background-color: #e8ffe8;
}
</style>
</head>
<body>
<table>
<!-- 列样式定义，放在表格内容之前 -->
<colgroup>
<col class="col-name">
<col class="col-age">
<col class="col-score">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>88</td>
</tr>
<tr>
<td>王五</td>
<td>19</td>
<td>92</td>
</tr>
</tbody>
</table>
</body>
</html>在这个示例中，我们为三列分别设置了不同的类名，通过CSS为类设置width和background-color属性，页面渲染后每一列的所有单元格都会应用对应的背景色和宽度，不需要逐个为<td>设置样式。
使用span属性批量控制多列
如果表格中有连续的几列需要设置相同的样式，可以使用<col>元素的span属性，指定该列样式需要应用的列数，避免重复写多个<col>元素。
下面的示例展示如何用span属性控制多列样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>col元素span属性示例</title>
<style>
table {
border-collapse: collapse;
width: 600px;
}
th, td {
border: 1px solid #333;
padding: 8px;
}
/* 第一列样式 */
.col-first {
width: 100px;
background-color: #f0f0f0;
}
/* 中间两列统一样式 */
.col-middle {
width: 150px;
background-color: #e8f4ff;
}
/* 最后一列样式 */
.col-last {
width: 200px;
background-color: #fff3e8;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="col-first">
<!-- span="2"表示这个样式应用到接下来的2列 -->
<col class="col-middle" span="2">
<col class="col-last">
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>90</td>
<td>95</td>
<td>88</td>
</tr>
<tr>
<td>2</td>
<td>85</td>
<td>92</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>这里表格一共有4列，第二个<col>元素设置了span="2"，所以它的样式会应用到第二列和第三列，也就是语文和数学两列，这样只需要写一次样式就能控制两列，减少了重复代码。
注意事项
- <colgroup>和<col>必须放在<table>标签内，且在所有行元素（<tr>、<thead>等）之前，否则样式可能无法生效。
- 不是所有CSS属性都能通过<col>和<colgroup>生效，文字颜色、对齐方式等属性需要直接为<td>或<th>设置，比如如果需要让某一列的文字居中，可以为该列的<td>添加类名设置
text-align: center。 - 如果<col>元素设置了span属性，要注意列数的对应，避免样式应用到错误的列上。
- 当同时存在<col>的样式和<td>的直接样式时，<td>的直接样式优先级更高，会覆盖<col>设置的对应属性。
HTML表格列样式col元素colgroupspan属性表格样式 本作品最后修改时间：2026-05-22 14:00:27