<colgroup>: 表格列组元素

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

此元素包含 全局属性。

span

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

以下属性已弃用，不应再使用。为了更新现有代码和历史记录，我们在下面记录了这些属性。

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，则忽略此属性，但它仍将用作align的默认值<col>属于此列组的元素。

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>元素。

使用两个<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 视觉突出显示结构

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 伪类，用于选择所需的列单元格