HTML <tfoot> 標簽

定義和用法

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

親自試一試

全局屬性

<tfoot> 標簽還支持 HTML 中的全局屬性。

事件屬性

<tfoot> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <tfoot> 元素：

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

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持