# HTML 的 <colgroup> 标签

HTML 的 <colgroup> 元素定义了表格中的一组列，通常包含 <col> 元素来定义列的属性。

如果 <colgroup> 元素包含 <col> 元素，则 <colgroup> 元素的 span 属性失效。

# 属性

• span: 指定 <col> 元素跨列的连续列数。该值必须是大于 0 的正整数。如果不存在，其默认值为 1。

# 示例

1. 基本示例

   <table>
       <!-- 定义列组 -->
       <colgroup>
           <col style="background-color: pink">
           <col style="background-color: lightblue">
           <col style="background-color: lightgreen">
           <col style="background-color: yellow">
       </colgroup>
   
       <caption>2023年员工工资表</caption>
       <thead>
           <tr>
               <th>姓名</th>
               <th>基本工资</th>
               <th>奖金</th>
               <th>实发工资</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>张三</td>
               <td>8,000</td>
               <td>1,200</td>
               <td>9,200</td>
           </tr>
           <tr>
               <td>李四</td>
               <td>7,500</td>
               <td>1,000</td>
               <td>8,500</td>
           </tr>
       </tbody>
   </table>
   

2. span 属性跨列示例：

   <table>
       <!-- 定义列组 -->
       <colgroup span="4" style="background-color: pink">
           <!-- 不能包含 col 元素 -->
       </colgroup>
   
       <caption>2023年员工工资表</caption>
       <thead>
           <tr>
               <th>姓名</th>
               <th>基本工资</th>
               <th>奖金</th>
               <th>实发工资</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>张三</td>
               <td>8,000</td>
               <td>1,200</td>
               <td>9,200</td>
           </tr>
           <tr>
               <td>李四</td>
               <td>7,500</td>
               <td>1,000</td>
               <td>8,500</td>
           </tr>
       </tbody>
   </table>
   

# 推荐阅读

• HTML 的 colgroup 元素 - MDN