如何在 HTML 表格页脚中实现三行分列的自定义结构（含跨行与对齐修复）

本文详解如何在 `

` 中正确构建三行并列的页脚区域，重点解决因 `colspan` 设置错误导致的列错位问题，并演示如何通过合理设置 `rowspan` 和新增 `` 实现“weight percentage (%)”列下的三行数据展示。

在 HTML 表格中实现复杂页脚布局（如某列下需显示三行独立内容）时，关键在于精确控制 rowspan 与 colspan 的协同关系。原代码中存在两个核心问题：

1. colspan 值不匹配： 中 Weight Percentage (%) 列声明为 colspan="1" rowspan="2"，但其下方实际需承载两列内容（如 “Weight 1 - 20” 和 “Weight 2 - 40”），导致后续列偏移，最终使 “Weight 4” 数据溢出表格边界；
2. 页脚行数不足：仅用两行 无法支撑三行语义化数据，必须显式添加第三行并统一调整 rowspan。

   ✅ 正确做法如下：

   • 修正表头跨列逻辑：将 Weight Percentage (%) 的 colspan 改为 2（因其下方需容纳两列：标签列 + 数值列），同时保留 rowspan="2" 以贯通表头两行；
   • 统一 tbody 中的跨列：对应地， 中该列单元格也需设为 colspan="2"，确保列数对齐；
   • 扩展 tfoot 为三行结构：使用 rowspan="3" 统一合并左侧固定列（如 Summation、汇总数值等），再通过三个独立 分别填充 “Weight 1 / 2 / 4” 及其对应数值。

     以下是修复后的完整代码示例（已验证渲染正常）：

     
     
     
       
     
         
     
           
     Discipline
           
     Weight Type 1
           
     Weight Percentage (%)
           
     Weight Type 2
         
         
     
           
     
           
     Weight 1
           
     Weight 2
           
     Weight 4
           
     Weight 1
           
     Weight 2
           
     Weight 4
         
       
       
     
         
     
           
     Discipline 1
           
     10
           
     20
           
     30
           
     100
           
     2
           
     1
           
     3
         
         
     
           
     Discipline 2
           
     20
           
     40
           
     60
           
     100
           
     4
           
     2
           
     6
         
       
       
     
         
     
           
     Summation
           
     30
           
     60
           
     90
           
     Weight 1
           
     20
           
     6
           
     3
           
     9
         
         
     
           
     Weight 2
           
     40
         
         
     
           
     Weight 4
           
     60
         
       
     

     ? 注意事项：

     • 所有 rowspan 值必须严格等于其覆盖的 总数（例如三行页脚 → rowspan="3"）；
     • colspan 需全局一致：若某列在 设为 colspan="2"，则 和 中对应位置也应保持相同跨列数，否则会破坏表格网格结构；
     • 推荐为 添加 padding 和 text-align 提升可读性（如示例中的 CSS）；
     • 浏览器对 渲染顺序无强制要求，但为语义清晰和兼容性，建议始终置于 之后。

       通过以上调整，即可稳健实现“单列下三行分项展示”的专业表格页脚效果，兼顾结构语义与视觉对齐。