HTML表格底部汇总行应使用语义化标签，置于后、前；需保持三层结构完整，列数一致，推荐标识汇总项，配合CSS设置加粗、底色、右对齐等样式，并合理使用colspan处理跨列汇总。

HTML表格本身不自带统计功能，底部汇总行需要手动添加，关键是结构清晰、语义正确、样式可控。

用 标签定义汇总行

HTML 提供了语义化标签

，专门用于包裹表格的页脚（通常是汇总行），它应放在 之后、 之前。浏览器会自动将 渲染在表格底部，即使代码位置写在 前面也一样显示在下方（这是 HTML 规范行为）。

• 确保 （表头）、 （主体）、 （页脚）三层结构完整
• 内部用 或 填充汇总内容，列数必须与主体一致
• 推荐对汇总单元格使用 表示“汇总”这类描述性文字，数值列仍用

  让汇总行数据对齐且加粗更醒目

  单纯靠结构还不够，需配合 CSS 提升可读性。汇总行通常右对齐数字、加粗、加底色，与主体区分。

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载
  • 给 tr 设置 background-color: #f5f5f5；font-weight: bold
  • 对最后一列（如金额）的 加 text-align: right；padding-right: 12px
  • 避免用 或 包裹每个单元格——语义上应由 CSS 控制样式

  注意 colspan 处理跨列汇总项

  如果汇总行只需一个“合计”文字加总值（比如只在最后一列显示总数），可用 colspan 合并前面的单元格。

  • 例如：合计 12,850 —— 前三列合并为“合计”，第四列放数值
  • 务必计算好 colspan 数值，使其与表头列数一致（如表头有4列，colspan="3" + 1个独立td = 总共4列）
  • 不要为了省事把整行写成 ，否则破坏列对齐逻辑，影响响应式或屏幕阅读器识别

    实际代码片段参考

    下面是一个带表头、3行数据、底部汇总的简洁示例：

    
      
        
          
          
          
          
        
      
      
        
          
          
          
          
        
        
          
          
          
          
        
      
      
        
          
          
          
          
        
      
    

    商品	数量	单价（元）	小计
    笔记本	5	12.50	62.50
    笔	20	2.00	40.00
    总计	25	–	102.50

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！