HTML 表格底部标签 - <tfoot>

什么是 <tfoot> 标签？

<tfoot> 标签用于定义HTML表格的底部部分。它包含表格的总计行或汇总行（使用 <tr> 标签定义），用于显示表格数据的总和、平均值或其他汇总信息。

基本语法

html 
<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot> <!-- 表格底部 -->
    <tr>
      <th>总计</th>
      <td>汇总数据</td>
    </tr>
  </tfoot>
</table>

父元素与子元素

父元素

<tfoot> 标签必须作为 <table> 元素的子元素。

子元素

<tfoot> 标签只能包含 <tr>（表格行）元素。

属性

全局属性

<tfoot> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为表格底部指定类名
id 为表格底部指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定表格底部内容的语言

示例

基本使用

html 
<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>¥5999</td>
      <td>2</td>
    </tr>
    <tr>
      <td>智能手机</td>
      <td>¥3999</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>总计</th>
      <td></td>
      <td>5</td>
    </tr>
  </tfoot>
</table>

使用CSS样式的底部行

html 
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  thead {
    background-color: #4CAF50;
    color: white;
  }
  
  tfoot {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  
  tfoot th {
    text-align: right;
  }
</style>

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>数量</th>
      <th>小计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本电脑</td>
      <td>¥5999</td>
      <td>2</td>
      <td>¥11998</td>
    </tr>
    <tr>
      <td>智能手机</td>
      <td>¥3999</td>
      <td>3</td>
      <td>¥11997</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">总计</th>
      <td>¥23995</td>
    </tr>
  </tfoot>
</table>

与其他表格结构元素一起使用

html 
<table>
  <caption>月度销售报表</caption>
  <thead>
    <tr>
      <th>日期</th>
      <th>销售额</th>
      <th>利润</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2025-01-01</td>
      <td>¥10000</td>
      <td>¥2000</td>
    </tr>
    <tr>
      <td>2025-01-02</td>
      <td>¥12000</td>
      <td>¥2400</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
  <tfoot>
    <tr>
      <th>本月总计</th>
      <td>¥300000</td>
      <td>¥60000</td>
    </tr>
    <tr>
      <th>平均日销售</th>
      <td>¥10000</td>
      <td>¥2000</td>
    </tr>
  </tfoot>
</table>

最佳实践

1. 用于汇总信息

<tfoot> 元素应该用于显示表格数据的汇总信息，如总计、平均值、最大值、最小值等。

2. 底部行只包含汇总数据

在 <tfoot> 元素中，应该只包含与汇总相关的数据，而不是详细数据。

3. 与thead和tbody结合使用

将 <tfoot> 与 <thead> 和 <tbody> 结合使用，可以创建结构清晰、语义化良好的表格。

4. 使用CSS样式美化底部行

使用CSS来设置底部行的样式，如背景色、字体大小、字体粗细等，以突出显示汇总信息。

5. 保持底部行简洁

底部行内容应该简洁明了，避免过长或过于复杂的描述。

浏览器兼容性

<tfoot> 标签在所有现代浏览器中都有良好的支持，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE6+

总结

<tfoot> 标签是HTML表格中的语义化结构元素，用于组织表格的汇总信息。通过合理使用 <tfoot> 标签，可以提高表格的可读性、可访问性和可维护性。记住要与 <thead> 和 <tbody> 结合使用，使用CSS进行样式设置，并遵循最佳实践来确保表格的质量。

最后更新：2026-02-07