<colgroup>: The Table Column Group element

<colgroup> HTML 元素定义表中的一组列。

¥The <colgroup> HTML element defines a group of columns within a table.

Try it

属性

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

span

指定 <colgroup> 元素跨越的连续列数。该值必须是大于零的正整数。如果不存在，则其默认值为 1。

注意：如果 <colgroup> 中有一个或多个 <col> 元素，则不允许使用 span 属性。

¥Note: The span attribute is not permitted if there are one or more <col> elements within the <colgroup>.

已弃用的属性

¥Deprecated attributes

以下属性已被弃用，不应使用。下面记录了它们，供更新现有代码时参考，并且仅供历史参考。

¥The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

align

指定每个列组单元格的水平对齐方式。可能的 enumerated 值为 left、center、right、justify 和 char。如果支持，char 值会将文本内容与 char 属性中定义的字符和 charoff 属性定义的偏移量对齐。请注意，后代 <col> 元素可以使用它们自己的 align 属性覆盖此值。请改用 <td> 和 <th> 元素上的 text-align CSS 属性，因为此属性已弃用。

注意：在 <colgroup> 元素上设置 text-align 没有任何效果，因为 <td> 和 <th> 元素不是 <colgroup> 元素的后代，因此它们不会从 <colgroup> 元素继承。

¥Note: Setting text-align on the <colgroup> element has no effect as <td> and <th> elements are not descendants of the <colgroup> element, and therefore they do not inherit from it.

如果表不使用 colspan 属性，请对每列使用 td:nth-of-type(an+b) CSS 选择器，其中 a 是表中列的总数，b 是表中列的序号位置，例如 td:nth-of-type(7n+2) { text-align: right; } 右对齐第二列单元格。

¥If the table does not use a colspan attribute, use the td:nth-of-type(an+b) CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table, e.g. td:nth-of-type(7n+2) { text-align: right; } to right-align the second column cells.

如果表格确实使用了 colspan 属性，则可以通过组合足够的 CSS 属性选择器（如 [colspan=n]）来实现效果，尽管这并不简单。

¥If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

bgcolor

定义每个列组单元格的背景颜色。该值是 HTML 颜色；6 位十六进制 RGB 代码（前缀为“#”）或 颜色关键词。不支持其他 CSS <color> 值。请改用 background-color CSS 属性，因为此属性已弃用。

char

不执行任何操作。它最初旨在指定内容与每个列组单元格的字符的对齐方式。当尝试对齐数字或货币值时，此值的典型值包括句点 (.)。如果 align 未设置为 char，则该属性将被忽略，但仍将用作该列组成员的 <col> 元素的 align 的默认值。

charoff

不执行任何操作。它最初旨在指定列组单元格内容与 char 属性指定的对齐字符之间的偏移字符数。

valign

指定每个列组单元格的垂直对齐方式。可能的 enumerated 值为 baseline、bottom、middle 和 top。请注意，后代 <col> 元素可以使用它们自己的 valign 属性覆盖此值。请改用 <td> 和 <th> 元素上的 vertical-align CSS 属性，因为此属性已弃用。

注意：在 <colgroup> 元素上设置 vertical-align 没有任何效果，因为 <td> 和 <th> 元素不是 <colgroup> 元素的后代，因此它们不会从 <colgroup> 元素继承。

¥Note: Setting vertical-align on the <colgroup> element has no effect as <td> and <th> elements are not descendants of the <colgroup> element, and therefore they do not inherit from it.

如果表不使用 colspan 属性，则每列使用 td:nth-of-type() CSS 选择器，例如 td:nth-of-type(2) { vertical-align: middle; } 将第二列单元格垂直居中。

¥If the table does not use a colspan attribute, use the td:nth-of-type() CSS selector per column, e.g. td:nth-of-type(2) { vertical-align: middle; } to center the second column cells vertically.

如果表格确实使用了 colspan 属性，则可以通过组合足够的 CSS 属性选择器（如 [colspan=n]）来实现效果，尽管这并不简单。

¥If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

width

指定当前列组中每列的默认宽度。除了标准像素和百分比值之外，此属性还可以采用特殊形式 0*，这意味着跨越的每列的宽度应该是容纳列内容所需的最小宽度。也可以使用诸如 5* 之类的相对宽度。请注意，后代 <col> 元素可以使用它们自己的 width 属性覆盖此值。请改用 width CSS 属性，因为此属性已弃用。

使用说明

¥Usage notes

  • <colgroup> 应出现在 <table> 内，在任何 <caption> 元素（如果使用）之后，但在任何 <thead>、<tbody>、<tfoot> 和 <tr> 元素之前。
  • 只有有限数量的 CSS 属性影响 <colgroup>：
    • background ：各种 background 属性将为列组内的单元格设置背景。由于列组背景色绘制在表格顶部，但位于应用于列 (<col>)、行组（<thead>、<tbody> 和 <tfoot>）、行（<tr>）和单个单元格（<th>）的背景色后面 和 <td>)，仅当在其顶部绘制的每个图层都具有透明背景时，应用于表列组的背景才可见。
    • border：各种 border 属性均适用，但仅当 <table> 设置了 border-collapse: collapse 时才适用。
    • visibility：列组的值 collapse 会导致该列组中列的所有单元格不被渲染，并且跨越其他列的单元格被剪切。列组中这些列原本占据的空间将被删除。但是，仍会计算其他列的大小，就像存在列组中折叠列中的单元格一样。visibility 的其他值没有影响。
    • width：width 属性定义列组中列的最小宽度，就像设置了 min-width 一样。

示例

¥Example

请参阅 <table> 了解介绍通用标准和最佳实践的完整表格示例。

¥See <table> for a complete table example introducing common standards and best practices.

此示例演示了一个七列表，该表分为两个跨多列的 <colgroup> 元素。

¥This example demonstrates a seven-column table divided into two <colgroup> elements that span multiple columns.

HTML

两个 <colgroup> 元素用于通过创建列组来构建基本表。每个列组中的列数由 span 属性指定。

¥Two <colgroup> elements are used to structure a basic table by creating column groups. The number of columns in each column group is specified by the span attribute.

html

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <tr>
    <th>周一</th>
    <th>星期二</th> 
    <th>星期三</th>
    <th>星期四</th> 
    <th>周五</th>
    <th>星期六</th> 
    <th>太阳</th>
  </tr> 
  <tr>
    <td>整理房间</td>
    <td>足球训练</td> 
    <td>舞蹈课程</td>
    <td>历史课</td> 
    <td>买饮料</td>
    <td>学习时间</td> 
    <td>空闲时间</td>
  </tr>
  <tr>
    <td>瑜伽</td>
    <td>国际象棋俱乐部</td> 
    <td>跟朋友见面</td>
    <td>体操</td> 
    <td>生日聚会</td>
    <td>钓鱼之旅</td> 
    <td>空闲时间</td>
  </tr>
</table>

CSS

分组列可用于使用 CSS 直观地高亮结构：

¥Grouped columns can be used to visually highlight the structure using CSS:

css
table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
  text-align: center;
}

.weekdays {
  background-color: #d7d9f2;
}

.weekend {
  background-color: #ffe8d4;
}
css
table {
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

结果

¥Result

技术总结

¥Technical summary

内容类别 没有任何。
允许的内容 如果 span 属性存在：无。
如果该属性不存在：零个或多个 <col> 元素
标签遗漏 如果起始标记有 <col> 元素作为其第一个子元素，并且前面没有 <colgroup>（其结束标记已被省略），则可以省略开始标记。
如果结束标记后面没有跟随，则可以省略结束标记 一个空格或一条评论。
允许的父级 <table> 元素。<colgroup> 必须出现在任何 <caption> 元素之后，但在任何 <thead>、<tbody>、<tfoot> 和 <tr> 元素之前。
隐式 ARIA 角色 没有对应的角色
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLTableColElement

规范

Specification
HTML Standard
# the-colgroup-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also