定义和用法
<colgroup>标签用于对 HTML 表格中的列进行分组。
<colgroup>标签用于为表格中的列同时设置整列的样式，而不需要重复为每个单元格或每行设置样式。
<colgroup>元素的基本语法：
<table>
<colgroup>
<col>
<col>
</colgroup>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>使用实例
接下来用多种实例演示<colgroup>标签的用法，来深化您对<colgroup>的理解。
1. 基本列分组
<table border="1">
<colgroup>
<col style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>HTML指南</td>
<td>$50</td>
</tr>
</table>2. 使用 span 属性
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>书名</th>
<th>价格</th>
</tr>
<tr>
<td>123456</td>
<td>HTML指南</td>
<td>$50</td>
</tr>
</table>3. 多列分组
<table border="1">
<colgroup>
<col span="1" style="background-color:lightblue">
<col span="2" style="background-color:lightgreen">
</colgroup>
<tr>
<th>序号</th>
<th>产品</th>
<th>描述</th>
</tr>
<tr>
<td>1</td>
<td>笔记本电脑</td>
<td>高性能</td>
</tr>
</table>全局属性
<colgroup>标签还支持 HTML 中的全局属性。
事件属性
<colgroup>标签还支持 HTML 中的事件属性。
默认的 CSS 设置
大多数浏览器将使用以下默认值显示<colgroup>元素：
colgroup {
display: table-column-group;
}注意事项
<colgroup>必须是<table>元素的直接子元素，且位于<caption>元素之后（如果有的话）。<colgroup>可以包含零个或多个<col>元素。- 如果同时使用
<colgroup>的 span 属性和<col>元素，span 属性会被忽略。 - 不是所有 CSS 属性都适用于列样式。有效的属性包括：background、border、width、visibility 等。
- 对于复杂的表格布局，可能需要结合使用
<colgroup>和单元格/行样式。
浏览器支持
 |
 |
 |
 |
 |
| 支持 | 支持 | 支持 | 支持 | 支持 |
评论区 0
发表评论
教程介绍
HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法 。
50
章节
50
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈