本文详解如何通过正确设置 `rowspan` 和 `colspan`，在表格 `
` 中构建包含三行数据的复合页脚，特别解决“weight percentage (%)”列需垂直拆分为多行、且保持列对齐不溢出的核心问题。在 HTML 表格布局中，实现页脚（
）内某列“一列三行”的结构（如展示 Weight 1 - 20、Weight 2 - 40、Weight 4 - 60），关键在于列数对齐与跨单元格属性的协同控制。常见错误是忽略 colspan 值与整体列宽匹配，导致后续单元格错位甚至溢出表格边界。✅ 正确结构要点解析
表头列数一致性：
中第一行使用 colspan="2" 为 Weight Percentage (%) 占位（因其下方需容纳两列内容：标签 + 数值），同时将 rowspan="2" 移至该，确保其纵向贯穿两行表头；第二行表头则需补全对应列，避免列数断层。 主体行（）同步适配：
每行中 Weight Percentage (%) 对应单元格必须使用 colspan="2"，与表头对齐。否则会引发列偏移，使后续列（如 Weight Type 2 的 Weight 4）被挤出表格。页脚三行实现逻辑：
- 使用
定义三行； - 左侧固定列（如 Summation、各类汇总值）统一设 rowspan="3"；
- 右侧需分三行显示的区域（如 Weight Percentage 子项），每行用独立
填充标签与数值，不跨列，自然形成垂直结构。 ✅ 修正后完整代码示例
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 ⚠️ 注意事项与调试建议
-
列总数验证：整张表所有
（含 thead/tbody/tfoot）的有效列数必须一致（本例为 9 列）。可通过手动计数或浏览器开发者工具检查 td/th 数量。 - 避免冗余 colspan="1"：显式声明 colspan="1" 不仅多余，还易掩盖逻辑错误；仅在需要合并多列时使用 colspan="n"（n > 1）。
- 样式兼容性： 应置于 之后，但部分旧版浏览器可能渲染异常，建议配合 display: table-footer-group 进行 CSS 强制定位（非必需，但可增强健壮性）。
- 语义化增强：若用于数据报表，建议为 Weight Percentage (%) 列添加 scope="col"，为 Discipline 列添加 scope="row"，提升可访问性。
通过精准控制 rowspan 与 colspan 的层级关系，并确保各区域列数严格对齐，即可稳健实现复杂页脚布局——无需 JavaScript，纯语义化 HTML + CSS 即可达成专业级表格呈现效果。
立即学习“前端免费学习笔记（深入）”；
