1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <tfoot>

<tfoot>: 表格脚注元素

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<tfoot> HTML 元素封装了一组表格行（<tr> 元素），表示它们构成了一个表格的脚注，包含有关表格列的信息。这通常是列的摘要，例如，一列中给定数字的总和。

试一试

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

属性

此元素包含全局属性。

已弃用属性

以下属性已弃用，不应使用。它们仅在更新现有代码时作为参考和出于历史兴趣而在此处记录。

align

指定每个脚注单元格的水平对齐方式。可能的枚举值有 left、center、right、justify 和 char。如果支持，char 值将文本内容对齐到char属性中定义的字符，并根据charoff属性定义的偏移量进行对齐。请改用text-align CSS 属性，因为此属性已弃用。

bgcolor

定义每个脚注单元格的背景颜色。该值是一个 HTML 颜色；可以是带 # 前缀的6 位十六进制 RGB 代码，也可以是颜色关键字。不支持其他 CSS <color> 值。请改用background-color CSS 属性，因为此属性已弃用。

char

不执行任何操作。它最初旨在指定内容对齐到每个脚注单元格的某个字符。当尝试对齐数字或货币值时，典型值包括句点（.）。如果align未设置为 char，则此属性将被忽略。

charoff

不执行任何操作。它最初旨在指定脚注单元格内容与char属性指定的对齐字符之间的偏移字符数。

valign

指定每个脚注单元格的垂直对齐方式。可能的枚举值有 baseline、bottom、middle 和 top。请改用vertical-align CSS 属性，因为此属性已弃用。

用法说明

  • <tfoot> 元素位于所有 <caption>、<colgroup>、<thead>、<tbody> 和 <tr> 元素之后。
  • <tfoot> 元素及其相关的 <thead> 和 <tbody> 元素提供了有用的语义信息，可在屏幕或打印渲染时使用。指定此类表格内容组还为辅助技术（包括屏幕阅读器和搜索引擎）提供了宝贵的上下文信息。
  • 当打印文档时，对于多页表格，表格脚注通常指定作为中间摘要输出到每一页的信息。

示例

请参阅 <table> 以获取一个完整的表格示例，其中介绍了常见的标准和最佳实践。

此示例演示了一个表格，该表格分为带列标题的标题部分、带表格主要数据的正文部分以及汇总一列数据的脚注部分。

HTML

<thead>、<tbody> 和 <tfoot> 元素用于将基本表格结构化为语义部分。<tfoot> 元素表示表格的脚注部分，其中包含一行（<tr>），表示“积分”列中值的计算平均值。

为了将脚注中的单元格分配到正确的列，<th> 元素上使用了 colspan 属性，将行标题单元格横跨前三列表格列。脚注中的单个数据单元格（<td>）会自动放置在正确的位置，即第四列，省略的 colspan 属性值默认为 1。此外，标题单元格（<th>）上的 scope 属性设置为 row，以明确定义此脚注标题单元格与同一行中的表格单元格相关，在我们的示例中，就是脚注行中包含计算平均值的一个数据单元格。

html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="row">Average Credits</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

CSS

使用一些基本的 CSS 来样式和突出显示表格脚注，使脚注单元格从表格正文中的数据中脱颖而出。

css
tfoot {
  border-top: 3px dotted rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

结果

技术摘要

内容类别 无。
允许内容 零个或多个 <tr> 元素。
标签省略 开始标签是强制性的。如果父 <table> 元素中没有更多内容，则可以省略结束标签。
允许父级 一个 <table> 元素。<tfoot> 必须出现在任何 <caption>、<colgroup>、<thead>、<tbody> 和 <tr> 元素之后。请注意，这是 HTML 中的要求。
最初，在 HTML4 中，情况恰恰相反：<tfoot> 元素不能放置在任何 <tbody> 和 <tr> 元素之后。
隐式 ARIA 角色 rowgroup
允许的 ARIA 角色 任意
DOM 接口 HTMLTableSectionElement

规范

规范
HTML
# the-tfoot-element

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题