<tfoot>: The Table Foot element

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

¥The <tfoot> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.

Try it

属性

¥Attributes

该元素包括全局属性。

¥This element includes the global attributes.

已弃用的属性

¥Deprecated attributes

以下属性已被弃用，不应使用。下面记录了它们，供更新现有代码时参考，并且仅供历史参考。

¥The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

align Deprecated: 指定每个脚单元的水平对齐方式。可能的 enumerated 值为 left、center、right、justify 和 char。如果受支持，char 值会将文本内容与 char 属性中定义的字符以及 charoff 属性定义的偏移量对齐。请改用 text-align CSS 属性，因为此属性已弃用。
bgcolor Deprecated: 定义每个脚单元的背景颜色。该值是 HTML 颜色；6 位十六进制 RGB 代码（前缀为“#”）或颜色关键词。不支持其他 CSS <color> 值。请改用 background-color CSS 属性，因为此属性已弃用。
char Deprecated: 指定内容与每个脚单元字符的对齐方式。当尝试对齐数字或货币值时，此值的典型值包括句点 (.)。如果 align 未设置为 char，则忽略该属性。
charoff Deprecated: 指定脚单元内容从 char 属性指定的对齐字符偏移的字符数。
valign Deprecated: 指定每个脚单元的垂直对齐方式。可能的 enumerated 值为 baseline、bottom、middle 和 top。请改用 vertical-align CSS 属性，因为此属性已弃用。

使用说明

¥Usage notes

<tfoot> 放置在任何 <caption>、<colgroup>、<thead>、<tbody> 和 <tr> 元素之后。
与相关的 <thead> 和 <tbody> 元素一起，<tfoot> 元素提供了有用的 semantic 信息，并且可以在渲染屏幕或打印时使用。指定此类表格内容组还可以为辅助技术（包括屏幕阅读器和搜索引擎）提供有价值的上下文信息。
打印文档时，在多页表格的情况下，表格脚通常指定作为每页上的中间摘要输出的信息。

示例

¥Example

请参阅 <table> 了解介绍通用标准和最佳实践的完整表格示例。

¥See <table> for a complete table example introducing common standards and best practices.

此示例演示了一个表格，该表格分为包含列标题的头部部分、包含表格主要数据的主体部分以及汇总一列数据的底部部分。

¥This example demonstrates a table divided into a head section with column headers, a body section with the table's main data, and a foot section summarizing data of one column.

HTML

<thead>、<tbody> 和 <tfoot> 元素用于将基本表构造为 semantic 部分。<tfoot> 元素表示表的脚部分，其中包含一行 (<tr>)，表示 "致谢" 列中的值的计算平均值。

¥The <thead>, <tbody>, and <tfoot> elements are used to structure a basic table into semantic sections. The <tfoot> element represents the foot section of the table, which contains a row (<tr>) representing the calculated average of the values in the "Credits" column.

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

¥To allocate the cells in the foot to the correct columns, the colspan attribute is used on the <th> element to span row header cell across the first three table columns. The single data cell (<td>) in the foot is automatically placed in the correct location, i.e., the fourth column, with the omitted colspan attribute value defaulting to 1. Additionally, the scope attribute is set to row on the header cell (<th>) in the foot to explicitly define that this foot header cell relates to the table cells within the same row, which in our example is the one data cell in the foot row that contains the calculated average.

html


<table>
  <thead>
    <tr>
      <th>学生卡</th>
      <th>名称</th> 
      <th>主要的</th>
      <th>致谢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>琼斯，玛莎</td> 
      <td>计算机科学</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>尼姆·维克托</td> 
      <td>俄罗斯文学</td>
      <td>220</td>
    </tr> 
    <tr>
      <td>4100332</td>
      <td>亚历山德拉·彼得罗夫</td> 
      <td>天体物理学</td>
      <td>260</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan="3" scope="row">平均学分</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

CSS

使用一些基本的 CSS 来设置表脚的样式和高亮，以便脚单元格从表体中的数据中脱颖而出。

¥Some basic CSS is used to style and highlight the table foot so that the foot cells stand out from the data in the table body.

css

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

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

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

tbody {
  background-color: #e4f0f5;
}

css

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

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

tr > td:last-of-type {
  text-align: center;
}

结果

¥Result

技术总结

¥Technical summary

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

规范

Specification
HTML Standard # the-tfoot-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also

学习：HTML 表格
<caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>:其他与表格相关的元素
background-color：CSS 属性设置每个脚单元的背景颜色
border：CSS 属性控制脚单元格的边框
text-align：用于水平对齐每个脚单元格内容的 CSS 属性
vertical-align：CSS 属性垂直对齐每个脚单元格内容