<colgroup>: 表格列组元素

试一试

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

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

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

td {
  text-align: center;
}

属性

此元素包含全局属性。

span

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

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

已弃用属性

以下属性已弃用，不应使用。它们仅在更新现有代码时作为参考和出于历史兴趣而在此处记录。

align 已弃用

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

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

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

如果表格确实使用了 colspan 属性，可以通过组合适当的 CSS 属性选择器（如 [colspan=n]）来实现效果，尽管这并非易事。

bgcolor 已弃用

定义每个列组单元格的背景颜色。该值是一个 HTML 颜色；可以是带 # 前缀的 6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS <color> 值。由于此属性已弃用，请改用 background-color CSS 属性。

char 已弃用

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

charoff 已弃用

无作用。它最初旨在指定列组单元格内容从 char 属性指定的对齐字符偏移的字符数。

valign 已弃用

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

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

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

如果表格确实使用了 colspan 属性，可以通过组合适当的 CSS 属性选择器（如 [colspan=n]）来实现效果，尽管这并非易事。

width 已弃用

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

用法说明

• <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。

示例

请参阅 <table> 以获取一个完整的表格示例，其中介绍了常见的标准和最佳实践。

此示例演示了一个七列表格，它被分成两个跨越多列的 <colgroup> 元素。

HTML

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

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <td>Clean room</td>
    <td>Football training</td>
    <td>Dance Course</td>
    <td>History Class</td>
    <td>Buy drinks</td>
    <td>Study hour</td>
    <td>Free time</td>
  </tr>
  <tr>
    <td>Yoga</td>
    <td>Chess Club</td>
    <td>Meet friends</td>
    <td>Gymnastics</td>
    <td>Birthday party</td>
    <td>Fishing trip</td>
    <td>Free time</td>
  </tr>
</table>

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;
}

table {
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

结果

技术摘要

规范

浏览器兼容性

另见

• 学习：HTML 表格基础
• <caption>、<col>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>：其他与表格相关的元素
• background-color：设置每个列组单元格背景颜色的 CSS 属性
• border：控制列组单元格边框的 CSS 属性
• text-align：水平对齐每个列组单元格内容的 CSS 属性
• vertical-align：垂直对齐每个列组单元格内容的 CSS 属性
• visibility：隐藏（或显示）列组单元格的 CSS 属性
• width：控制列组中每列默认宽度的 CSS 属性
• :nth-of-type、:first-of-type、:last-of-type：选择所需列单元格的 CSS 伪类