colgroup ：表格列组元素
<style>.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre code { padding: 0; background: none; }
</style>
<div class="artBox">
<p>表格列组元素 <code><colgroup></code> 用于定义 <code><table></code> 表格的一组列，即设置一个或多个列为一组以便通过 CSS 设定该组所有列的样式。换言之， <code>colgroup</code> 是 HTML 表格中的一个元素，用于对表格的列进行分组和样式化，其主要功能是为一组列设置统一的样式或属性，从而简化表格的样式管理。</p>
<h2>一、colgroup语法结构：</h2>
<div class="codebox">
<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; }
</div>
<p>【注】子元素 <code><col></code> 为自闭合标签，它可以拥有一个 <code>span</code> 属性，用于设定“合并”列，缺省此属性时其值为 1，即 col 是个单列，当 span 值为 n，表示该 col 标签将 n 个表格自然列“合并”在一起进行定义。这里的“合并”不是真的合并单元格，而是归拢 n 个自然列为一个子组。</p>
<p>下面给出一个可以预览的应用实例：</p>
<div class="codebox" data-prev="1"><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>
</div>
<h2>二、使用 <colgroup> 标签注意事项</h2>
<ul>
<li><p><code><colgroup></code> 标签应出现在 <code><table></code> 标签之内</p>
</li>
<li><p><code><colgroup></code> 标签在 table 代码流中非常讲究，<strong>必须放在任何 <code><caption></code> 元素（如果使用）之后、并在任何 <code><thead></code>、<code><tbody></code>、<code><tfoot></code> 和 <code><tr></code> 元素之前</strong></p>
</li>
<li><p>只有数量有限的 CSS 属性会影响 <code><colgroup></code>：</p>
<ol>
<li>background</li>
<li>border</li>
<li>visibility</li>
<li>width</li>
</ol>
</li>
</ul>
<h2>三、为 <code>table</code> 设置多个 <code>colgroup</code> 标签</h2>
<p><code><colgroup></code> 标签自身和其子标签 <code><col></code> 一样也可以拥有自己的 span 属性，这意味着我们可以通过多个无需子元素的 <code><colgroup></code> 标签来设置不同子组列的样式。下面可以在线预览的实例是一个七列的表格，分为 5 个子组：</p>
<div class="codebox" data-prev="1"><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>
</div>
<p>总而言之，表格用来展现数据在 HTML 中占据一定优势，而表格中的列分组标签 <code>colgroup</code> 可以灵活设置不同子组列的样式和属性，用好它可以令数据的渲染更为精彩、美观。</p>
</div>
<script>
function loadLineNumFile() {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
script.defer = true;
script.onload = () => addLineNumber();
document.head.appendChild(script);
}
loadLineNumFile();
</script> 黑黑老师下午嚎！这同做音画有什么关系啊？对搞会计的有帮助。 确实漂亮，表格中的列分组标签 colgroup 用好不容易呢，谢谢马老师精彩讲授与演示{:4_190:} 杨帆 发表于 2026-4-16 16:47
确实漂亮，表格中的列分组标签 colgroup 用好不容易呢，谢谢马老师精彩讲授与演示
这个关键是能够把表格的代码对应到真是表格的外观，换种说法就是：
一、先认识 caption 是表格标题、thead 是表头、tbody 是表体，它们都是 <table> 的子层元素；
二、thead 的子元素是 tr，tr 的子元素是 th，这是表头单元格的构建；
三、tbody 的子元素是 tr，tr 的子元素是 td，这是表体单元格的构建；
弄清楚上面的结构，再去理解 colgroup 就不难了。 梦江南 发表于 2026-4-16 14:25
黑黑老师下午嚎！这同做音画有什么关系啊？对搞会计的有帮助。
不是所有的东东都和做帖有关。
做帖子只用到 css、HTML、JS 中极少的一部分知识。 马黑黑 发表于 2026-4-16 18:57
这个关键是能够把表格的代码对应到真是表格的外观，换种说法就是：
一、先认识 caption 是表格标题、t ...
这样就捋顺了，我学习一下~谢谢马老师悉心指导{:4_180:} 杨帆 发表于 2026-4-16 19:22
这样就捋顺了，我学习一下~谢谢马老师悉心指导
很多人学习 table 的困惑就是没有理清代码和实际表格的对应关系。一个最简单的表格代码可以是这样：
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>李军</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>魏芳</td>
<td>女</td>
</tr>
</table>tr + th 构成表头单元格，tr + td 构成表体单元格。tr 实际上可以代表行，th/td 则将行划分出列，列数要前后一致（就是说 tr 下的 th/td 子元素的数量总是一样的。
在上面代码结构基础上，可以加入 caption（表格标题栏）、thead（表头栏）、tbody（表体），不加入也行。如果不加入标题、表头、表体等标签，那么，colgroup 标签必须在第一个 tr 的前面。
“当 span 值为 n，表示该 col 标签将 n 个表格自然列“合并”在一起进行定义。”
感觉这个挺要紧，不设置 span 则默认是1列，而有多个 span 则说明这些多个表格将被统一设置，这也正是分组的意义所在。 黑黑的讲解十分清晰，原本对表格设置不太清楚，看看这个帖子真好{:4_199:} 马黑黑 发表于 2026-4-16 20:15
很多人学习 table 的困惑就是没有理清代码和实际表格的对应关系。一个最简单的表格代码可以是这样：
tr...
好像规定挺多呢，我先学习一下，谢谢马老师~{:4_180:} 杨帆 发表于 2026-4-16 21:03
好像规定挺多呢，我先学习一下，谢谢马老师~
也不是规定多。代码是语言描述，描述的语法当然需要一定的规范。 红影 发表于 2026-4-16 21:01
黑黑的讲解十分清晰，原本对表格设置不太清楚，看看这个帖子真好
有不懂的地方尽管问 红影 发表于 2026-4-16 21:01
“当 span 值为 n，表示该 col 标签将 n 个表格自然列“合并”在一起进行定义。”
感觉这个挺要紧，不设置 ...
对。还需要注意的是，<col> 也好，<colgroup> 也好，它们的 span 是有延续性的，例如第一个默认，第二个 span="2"，则第二个是规范了自然列的第二、三列，后续的从自然列的第四列开始，依次类推。 马黑黑 发表于 2026-4-16 22:30
也不是规定多。代码是语言描述，描述的语法当然需要一定的规范。
是，高度认同！{:4_199:} 杨帆 发表于 2026-4-16 22:35
是，高度认同！
关键是系统地去了解 table 代码的相关组织方式 马黑黑 发表于 2026-4-16 23:24
关键是系统地去了解 table 代码的相关组织方式
是，只是要使用<colgroup> 标签，必做动作挺多呢，慢慢熟悉吧 杨帆 发表于 2026-4-16 23:38
是，只是要使用 标签，必做动作挺多呢，慢慢熟悉吧
{:4_190:} 马黑黑 发表于 2026-4-16 18:58
不是所有的东东都和做帖有关。
做帖子只用到 css、HTML、JS 中极少的一部分知识。
黑黑老师下午嚎！ 梦江南 发表于 2026-4-18 15:13
黑黑老师下午嚎！
都嚎都嚎 马黑黑 发表于 2026-4-16 22:30
有不懂的地方尽管问
我需要多看几遍，这个很清晰，暂时没什么需要问的{:4_204:}
页:
[1]
2