马黑黑老师 colgroup ：表格列组元素

醉美水芙蓉

表格列组元素 <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>：

  1. background
  2. border
  3. visibility
  4. 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 可以灵活设置不同子组列的样式和属性，用好它可以令数据的渲染更为精彩、美观。

klxf

这个标签用好不容易呢，谢谢醉美管理员分享

dazhankuai

赞，顶帖超有参考作用

岩新新

很给力。。。。很喜欢

luxianshi

感谢分享，充满生活智慧

lanseyuanwei

感谢分享，带来美好体验

uxyto

感谢分享，带来满满惊喜

esegolusy

支持！！！！！！

怀仁

赞，顶帖角度十分独特

游侠

感谢分享，让我有所得啦