请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
表格列组元素 <colgroup> 用于定义 <table> 表格的一组列，即设置一个或多个列为一组以便通过 CSS 设定该组所有列的样式。换言之， colgroup 是 HTML 表格中的一个元素，用于对表格的列进行分组和样式化，其主要功能是为一组列设置统一的样式或属性，从而简化表格的样式管理。
一、colgroup语法结构：
<colgroup>
<col class="col-idx"> <!-- 第一列 -->
<col span="2" class="col-main"> <!-- 第二、三列 -->
<col class="col-comment"> <!-- 第四列 -->
</colgroup>
<!-- 对应 CSS 代码 -->
.col-idx { background: silver; }
.col-main { background: tan; }
.col-comment { background: pink; }
【注】子元素 <col> 为自闭合标签，它可以拥有一个 span 属性，用于设定“合并”列，缺省此属性时其值为 1，即 col 是个单列，当 span 值为 n，表示该 col 标签将 n 个表格自然列“合并”在一起进行定义。这里的“合并”不是真的合并单元格，而是归拢 n 个自然列为一个子组。
下面给出一个可以预览的应用实例：
<style>
table { width: 800px; border-collapse: collapse; margin: 30px; }
caption { font-size: 2em; font-weight: bold; padding-bottom: 10px; }
th { background: #3498db; color: white; padding: 12px; text-align: left; font-weight: bold; text-align: center; }
td { padding: 8px 12px; border-bottom: 1px solid #eee; border: 1px solid gray; }
.col-idx { background: aliceblue; }
.col-main { background: beige; }
.col-comment { background: silver; }
</style>
<table>
<caption>学生名册</caption>
<!-- colgroup标签放在 caption 标签之后 -->
<colgroup>
<col class="col-idx">
<col span="2" class="col-main"> <!-- span 属性“合并”自然列 -->
<col class="col-comment">
</colgroup>
<!-- colgroup标签放在 thead 标签之前 -->
<thead>
<tr>
<th width="8%">序号</th>
<th width="20%">姓名</th>
<th width="8%">年龄</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>玛利亚</td>
<td>17</td>
<td>父母离异，随母亲生活</td>
</tr>
<tr>
<td>2</td>
<td>阿古丽</td>
<td>15</td>
<td>父亲为联合国维和部队上尉</td>
</tr>
<tr>
<td>3</td>
<td>朱亚军</td>
<td>18</td>
<td></td>
</tr>
</tbody>
</table>
二、使用 <colgroup> 标签注意事项
<colgroup> 标签应出现在 <table> 标签之内
<colgroup> 标签在 table 代码流中非常讲究，必须放在任何 <caption> 元素（如果使用）之后、并在任何 <thead>、<tbody>、<tfoot> 和 <tr> 元素之前
只有数量有限的 CSS 属性会影响 <colgroup>：
- background
- border
- visibility
- width
三、为 table 设置多个 colgroup 标签
<colgroup> 标签自身和其子标签 <col> 一样也可以拥有自己的 span 属性，这意味着我们可以通过多个无需子元素的 <colgroup> 标签来设置不同子组列的样式。下面可以在线预览的实例是一个七列的表格，分为 5 个子组：
<style>
table { width: 800px; border-collapse: collapse; margin: 30px; }
caption { font-size: 2em; font-weight: bold; padding-bottom: 10px; }
th { background: #3498db; color: white; padding: 12px; text-align: left; font-weight: bold; text-align: center; }
td { padding: 8px 12px; border-bottom: 1px solid #eee; border: 1px solid gray; }
.index { background: aliceblue; }
.main1 { background: beige; }
.main2 { background: gold; }
.main3 { background: tan; }
.comment { background: silver; }
</style>
<table>
<caption>学生名册</caption>
<!-- colgroup标签放在 caption 标签之后 -->
<colgroup class="index"></colgroup>
<colgroup span="3" class="main1"></colgroup> <!-- span 属性“合并”自然列 -->
<colgroup class="main2"></colgroup>
<colgroup class="main3"></colgroup>
<colgroup class="comment"></colgroup>
<!-- colgroup标签放在 thead 标签之前 -->
<thead>
<tr>
<th width="8%">序号</th>
<th width="10%">姓名</th>
<th width="8%">性别</th>
<th width="8%">年龄</th>
<th width="8%">表现</th>
<th width="28%">家庭住址</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>玛利亚</td>
<td>女</td>
<td>17</td>
<td>优</td>
<td>雅虎镇单亲公寓006号</td>
<td>父母离异，随母亲生活</td>
</tr>
<tr>
<td>2</td>
<td>阿古丽</td>
<td>女</td>
<td>15</td>
<td>优+</td>
<td>西单公寓109号</td>
<td>父亲为联合国维和部队上尉</td>
</tr>
<tr>
<td>3</td>
<td>朱亚军</td>
<td>男</td>
<td>18</td>
<td>优++</td>
<td>东大丰县县城北区西江公寓238号</td>
<td></td>
</tr>
</tbody>
</table>
总而言之，表格用来展现数据在 HTML 中占据一定优势，而表格中的列分组标签 colgroup 可以灵活设置不同子组列的样式和属性，用好它可以令数据的渲染更为精彩、美观。
| 
发表于 2026-4-16 13:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2026-4-16 14:25
发表于 2026-4-16 16:47
楼主