PHP小码农

Appearance

colgroup 与 col ​

<colgroup> 和 <col> 用于将表格的列进行分组，并为整列统一设置样式。本节将介绍这两个元素的语法、span 属性以及如何使用它们高效地设置列样式。

前置知识

阅读本节前，建议先了解：caption 表格标题

基础概念 ​

<colgroup> 将表格的列分为逻辑组，可以一次性为整组列设置样式。<col> 则用于选择单独的列或跨越多列。这两个元素本身不创建表格的单元格，而是作为样式和结构提示存在。

使用 <colgroup>/<col> 可以避免为每行每个单元格重复设置相同的 CSS 类。

语法 ​

基本用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>colgroup 与 col</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 10px; }
  </style>
</head>
<body>
  <h1>colgroup 与 col</h1>

  <table>
    <caption>产品库存表</caption>

    <!-- colgroup：为第一列设置灰色背景 -->
    <colgroup>
      <col style="background: #f5f5f5; width: 30%;">
    </colgroup>

    <!-- colgroup：为第二、三列统一设置样式 -->
    <colgroup>
      <col style="background: #e8f5e9; width: 35%;">
      <col style="background: #e3f2fd; width: 35%;">
    </colgroup>

    <thead>
      <tr>
        <th>产品</th>
        <th>库存数量</th>
        <th>单价</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>产品 A</td>
        <td>150</td>
        <td>￥299</td>
      </tr>
      <tr>
        <td>产品 B</td>
        <td>80</td>
        <td>￥599</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

详细说明 ​

colgroup 的 span 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>colgroup span</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 10px; }
  </style>
</head>
<body>
  <h1>colgroup span 属性</h1>

  <table>
    <caption>周计划表</caption>

    <!-- span="3"：此 colgroup 跨越 3 列 -->
    <colgroup span="3" style="background: #fff3e0;"></colgroup>

    <!-- span="4"：此 colgroup 跨越 4 列 -->
    <colgroup span="4" style="background: #e3f2fd;"></colgroup>

    <thead>
      <tr>
        <th>上午</th>
        <th>上午</th>
        <th>上午</th>
        <th>下午</th>
        <th>下午</th>
        <th>下午</th>
        <th>下午</th>
      </tr>
      <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>数学</td><td>英语</td><td>物理</td>
        <td>语文</td><td>化学</td><td>生物</td><td>历史</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

colgroup 与 col 的组合 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>colgroup + col 组合</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: center; }
    th { background: #333; color: #fff; }
  </style>
</head>
<body>
  <h1>colgroup + col</h1>

  <table>
    <caption>销售报表</caption>

    <!-- 使用 colgroup + col 为每列单独设置样式 -->
    <colgroup>
      <col style="background: #f5f5f5; width: 25%;">  <!-- 第 1 列 -->
      <col style="width: 25%;">                      <!-- 第 2 列 -->
      <col style="width: 25%;">                      <!-- 第 3 列 -->
      <col style="background: #e8f5e9; width: 25%;">  <!-- 第 4 列 -->
    </colgroup>

    <thead>
      <tr>
        <th>地区</th>
        <th>销售额</th>
        <th>增长率</th>
        <th>利润率</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>华东</td>
        <td>500 万</td>
        <td>+12%</td>
        <td>25%</td>
      </tr>
      <tr>
        <td>华南</td>
        <td>380 万</td>
        <td>+8%</td>
        <td>22%</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

colgroup 的位置 ​

html
<!--
  colgroup 必须放在以下位置之一：
  1. table 的第一个子元素（在 caption 之后，thead 之前）
  2. caption 之后、thead 之前

  正确的顺序：
  <table>
    <caption>标题</caption>
    <colgroup>...</colgroup>  ← 在这里
    <thead>...</thead>
    <tbody>...</tbody>
  </table>

  错误的顺序：
  <table>
    <thead>...</thead>
    <colgroup>...</colgroup>  ← 不在这里
    <tbody>...</tbody>
  </table>
-->

实战示例 ​

数据对比表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据对比</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 12px; border: 1px solid #eee; text-align: center; }
    th { font-weight: 600; }
    .plan-name { text-align: left; font-weight: 600; }
    .highlight { background: #e8f5e9 !important; }
    caption {
      caption-side: top;
      font-size: 18px;
      font-weight: bold;
      padding: 8px 0;
      text-align: left;
    }
  </style>
</head>
<body>
  <table>
    <caption>套餐对比</caption>

    <!-- 列分组：功能名 + 三个套餐 -->
    <colgroup>
      <col style="width: 30%;">
      <col style="width: 23.3%;">
      <col class="highlight" style="width: 23.3%;">
      <col style="width: 23.3%;">
    </colgroup>

    <thead>
      <tr>
        <th>功能</th>
        <th>基础版</th>
        <th>专业版</th>
        <th>企业版</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="plan-name">存储空间</td>
        <td>5 GB</td>
        <td>50 GB</td>
        <td>无限</td>
      </tr>
      <tr>
        <td class="plan-name">用户数</td>
        <td>1</td>
        <td>10</td>
        <td>无限</td>
      </tr>
      <tr>
        <td class="plan-name">技术支持</td>
        <td>社区</td>
        <td>优先</td>
        <td>专属</td>
      </tr>
      <tr>
        <td class="plan-name">价格</td>
        <td>免费</td>
        <td>￥99/月</td>
        <td>￥299/月</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

注意事项 ​

  • <colgroup> 必须放在 <caption> 之后、<thead> 之前
  • <col> 是空元素，不需要结束标签
  • <col> 只能设置有限的 CSS 属性（background、width、border、visibility 等）
  • <col> 不能设置 padding、font-size 等影响布局的属性
  • <colgroup> 的 span 属性不能与内部 <col> 同时使用

最佳实践 ​

  • 使用 <colgroup>/<col> 统一设置列的宽度和背景
  • 避免在每行的每个单元格上重复设置相同的 class
  • 使用 span 属性为多列统一设置样式
  • 对于需要复杂样式的列，仍需在 <th>/<td> 上设置 class
  • <col> 的 CSS 属性支持有限，复杂样式用 CSS 类替代

下一节

继续学习：thead / tbody / tfoot

参考链接 ​