【HTML教程】HTML的tfoot标签|html入门知识

攻城狮与产品喵

发布于 2026-05-11 12:49:19

740

文章被收录于专栏：攻城狮与产品喵攻城狮与产品喵

——致力做企业用得上的平台； ——开发企业节省成本的系统；

#tfoot标签 #HTML教程 #HTML标签 #html入门知识

【定义和用法】

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

tfoot元素与 thead和 tbody元素结合使用，以指定表格的每个部分(页脚、页眉、正文)。

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

注意： tfoot元素内必须包含一个或多个 tr标签。

tfoot标签必须在以下上下文中使用：作为 table元素的子元素，在任何 caption、colgroup、thead和 tbody元素之后。

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

【实例】

例子 1

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

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>储蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot></table>

例子 2

使用 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>月份</th>
      <th>储蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot></table>

例子 3

如何对齐 tfoot中的内容(使用 CSS)：

<table style="width:100%">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot></table>

例子 4

如何垂直对齐 tfoot中的内容(使用 CSS)：

<table style="width:100%">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot></table>

【默认的 CSS 设置】

大多数浏览器将使用以下默认值显示 tfoot元素：

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-04-29，如有侵权请联系 cloudcommunity@tencent.com 删除

入门

本文分享自攻城狮与产品喵微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度