HTML <colgroup> 标签

HTML <colgroup> 标签定义表格中的一组列。它允许你对整个列应用样式属性，从而简化了大型表格的设计和维护工作。

语法

<table>
  <colgroup span="number" class="className">
    <!-- column style properties go here -->
  </colgroup>
</table>
  • span: 此属性定义了列组中的列数。如果未指定，则默认为1。
  • class: 此属性允许你通过类名来应用样式规则。

使用方法

  1. 在表格的开始标签和结束标签之间添加一个或多个 <colgroup> 元素。
  2. 使用 span 属性定义每组中包含的列数。
  3. 使用 CSS 样式规则来设计你的列组，例如背景颜色、边框宽度和边框样式。
  4. 记得给你的 <colgroup> 元素添加类名（class）以便于应用样式规则。

示例

下面是一个使用 <colgroup> 标签来设置表格中不同列组样式的简单示例：

<table border="1">
  <colgroup span="2" style="background-color:lightgreen; border:5px solid green;"></colgroup>
  <colgroup style="background-color:pink; border:5px solid red;"></colgroup>
  <tr>
    <td>Green Column 1</td>
    <td>Green Column 2</td>
    <td>Pink Column 3</td>
  </tr>
</table>

在这个例子中，前两列会有绿色背景和绿色边框，而第三列则为粉红色背景和红色边框。

希望这个教程对你有所帮助！如果你还有其他问题或需要更多解释，请随时告诉我。