码农教程 - 一技在手,衣食无忧! tools

HTML <tfoot> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

包含 <thead>、<tbody> 和 <tfoot> 元素的 HTML 表格：

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<tfoot>标签用于对 HTML 表格中的页脚内容进行分组。

这个<tfoot>元素与<标题>和<正文>元素来指​​定表格的每个部分（页脚、页眉、正文）。

浏览器可以使用这些元素来独立于页眉和页脚滚动表格主体。此外，当打印跨多个页面的大型表格时，这些元素可以使表格页眉和页脚打印在每页的顶部和底部。

笔记：这个<tfoot>元素必须有一个或多个<tr>里面有标签。

这个<tfoot>标签必须在以下上下文中使用：作为<表>元素，在任意之后<标题>,<colgroup>,<标题>， 和<正文>元素。

提示：<thead>、<tbody> 和<tfoot>默认情况下，元素不会影响表格的布局。但是，您可以使用 CSS 来设置这些元素的样式（请参见下面的示例）！

浏览器支持

Element
<tfoot> Yes Yes Yes Yes Yes

全局属性

这个<tfoot>标签还支持HTML 中的全局属性。

事件属性

这个<tfoot>标签还支持HTML 中的事件属性。

更多示例

示例

使用 CSS 设置 <thead>、<tbody> 和 <tfoot> 样式：

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}

table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
亲自试一试 »

示例

如何对齐 <tfoot> 内的内容（使用 CSS）：

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
亲自试一试 »

示例

如何垂直对齐 <tfoot> 内的内容（使用 CSS）：

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
亲自试一试 »

默认 CSS 设置

大多数浏览器都会显示<tfoot>具有以下默认值的元素：

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}


❮上一节 完整的 HTML参考 下一节❯