HTML 标签

简介

<colgroup> 标签用于定义表格中一组或多组列的属性，常常与 <table> 标签一起使用。通过 <colgroup> 标签可以统一设置一些列的宽度、背景颜色、边框等属性，从而避免在每一列上单独设置属性的繁琐。

语法

<colgroup> 标签必须放置在 <table> 标签内，可以有多个 <colgroup> 标签，但是必须在 <thead>、 <tbody> 和 <tfoot> 标签之前。

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

在 <colgroup> 中，可以使用 <col> 标签来定义每一列的属性，也可以将多个 <col> 标签合并为一组，并设置共同的属性。

<colgroup>
  <col style="background-color: #eee;">
  <col style="background-color: #aaa;">
  <col style="background-color: #eee;">
  <col style="background-color: #aaa;">
</colgroup>

<colgroup>
  <col span="2" style="border: 1px solid red;">
  <col span="2" style="border: 1px solid green;">
</colgroup>

属性

span

定义一组 <col> 标签应该跨越多少个列。

<colgroup>
  <col span="2">
  <col span="2">
  <col>
</colgroup>

width

定义列的宽度。

<colgroup>
  <col width="20%">
  <col width="40%">
  <col width="40%">
</colgroup>

style

定义列的样式。

<colgroup>
  <col style="background-color: #eee;">
  <col style="background-color: #aaa;">
  <col style="background-color: #eee;">
  <col style="background-color: #aaa;">
</colgroup>

注意事项

• 如果 <table> 标签中没有 <colgroup> 标签，浏览器会自动为每一列分配默认宽度。
• <col> 标签只能放置在 <colgroup> 标签内，不能单独使用。
• 当一个 <col> 标签设置了宽度，它会覆盖掉所有该列中的单元格的宽度设置。
• 如果不同的 <colgroup> 标签中，包含了同一列的 <col> 标签，则以最后一个 <col> 标签的属性为准。