<tfoot>：表格脚注元素

此元素包含 全局属性。

以下属性已弃用，不应使用。在更新现有代码和出于历史参考目的时，下面会对此进行说明。

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，明确定义此表脚标题单元格与同一行内的表格单元格相关联，在本例中，是表脚行中包含计算平均值的一个数据单元格。

<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 用于设置表脚的样式并突出显示它，以便表脚单元格在表格主体中的数据中脱颖而出。

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;
}

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;
}

结果

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