如何在 HTML 表格页脚中实现三行分列的自定义汇总区域

本文详解如何在 `

在 HTML 表格中实现复杂页脚（如多行分列汇总）时，关键在于列数对齐与跨单元格属性的精确协同。原代码中存在两个核心问题：

1. 中 Weight Percentage (%) 的 colspan="1" 错误设置：该列需同时覆盖“Weight Type 1”和“Weight Type 2”的横向空间，实际应设为 colspan="2"（因右侧有两组 Weight 列，每组含 3 列，但中间仅占 1 列宽度，需通过 colspan 协调整体列数平衡）；
2. 缺失第三行且 rowspan 未同步更新：要实现三行数据（Weight 1/2/4），必须显式添加第三个 ，并确保所有需纵向合并的单元格（如 Summation、数值列）的 rowspan 值统一设为 3。

   以下是修正后的完整代码（已通过浏览器验证，列对齐无溢出）：

   

   人声去除

   用强大的AI算法将声音从音乐中分离出来

   下载

   <style>
   .table th, .table td {
     border: 1px solid black;
     padding: 8px;
     text-align: center;
   }
   </style>
   
   <table class="table">
     <thead>
       <tr>
         <td>Discipline</td>
         <th colspan="3">Weight Type 1</th>
         <th colspan="2" rowspan="2">Weight Percentage (%)</th>
         <th colspan="3">Weight Type 2</th>
       </tr>
       <tr>
         <th></th>
         <th>Weight 1</th>
         <th>Weight 2</th>
         <th>Weight 4</th>
         <th>Weight 1</th>
         <th>Weight 2</th>
         <th>Weight 4</th>
       </tr>
     </thead>
     <tbody>
       <tr style="background-color: white;">
         <th>Discipline 1</th>
         <td>10</td>
         <td>20</td>
         <td>30</td>
         <td colspan="2">100</td>
         <td>2</td>
         <td>1</td>
         <td>3</td>
       </tr>
       <tr style="background-color: white;">
         <th>Discipline 2</th>
         <td>20</td>
         <td>40</td>
         <td>60</td>
         <td colspan="2">100</td>
         <td>4</td>
         <td>2</td>
         <td>6</td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
         <td rowspan="3"><b>Summation</b></td>
         <td rowspan="3">30</td>
         <td rowspan="3">60</td>
         <td rowspan="3">90</td>
         <td style="width: 100px;">Weight 1</td>
         <td style="width: 100px;">20</td>
         <td rowspan="3">6</td>
         <td rowspan="3">3</td>
         <td rowspan="3">9</td>
       </tr>
       <tr>
         <td>Weight 2</td>
         <td>40</td>
       </tr>
       <tr>
         <td>Weight 4</td>
         <td>60</td>
       </tr>
     </tfoot>
   </table>

   ✅ 关键修正点总结：

   • 列数一致性： 第一行总列数 = 1 (Discipline) + 3 (Type 1) + 2 (Percentage) + 3 (Type 2) = 9；第二行通过空 占位保持列数匹配；
   • 页脚三行结构： 使用三个 ，其中第一行定义 Weight 1 行，第二行 Weight 2，第三行 Weight 4， 内容严格按列位置放置；
   • rowspan 同步：所有需垂直跨越三行的单元格（如 Summation、数值列 30/60/90/6/3/9）均设 rowspan="3"，避免列偏移；
   • 样式建议：添加 padding 和 text-align 提升可读性，width 限制文本列宽度防止内容撑开表格。

   ⚠️ 注意：若后续需动态生成此类页脚，务必确保 JavaScript 操作 DOM 时同步更新所有关联单元格的 rowspan 值，否则将重现列错位问题。