1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <tfoot>

<tfoot>: 表格腳註元素

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

<tfoot> HTML 元素封裝了一組表格行（<tr> 元素），表示它們構成了一個表格的腳註，包含有關表格列的資訊。這通常是列的摘要，例如，一列中給定數字的總和。

試一試

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

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

caption {
  caption-side: bottom;
  padding: 10px;
}

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

td {
  text-align: center;
}

屬性

此元素包含全域性屬性。

已棄用屬性

以下屬性已棄用，不應使用。它們僅在更新現有程式碼時作為參考和出於歷史興趣而在此處記錄。

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，以明確定義此腳註標題單元格與同一行中的表格單元格相關，在我們的示例中，就是腳註行中包含計算平均值的一個數據單元格。

html
<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 來樣式和突出顯示錶格腳註，使腳註單元格從表格正文中的資料中脫穎而出。

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

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

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

tbody {
  background-color: #e4f0f5;
}

結果

技術摘要

內容類別 無。
允許內容 零個或多個 <tr> 元素。
標籤省略 開始標籤是強制性的。如果父 <table> 元素中沒有更多內容，則可以省略結束標籤。
允許父級 一個 <table> 元素。<tfoot> 必須出現在任何 <caption>、<colgroup>、<thead>、<tbody> 和 <tr> 元素之後。請注意，這是 HTML 中的要求。
最初，在 HTML4 中，情況恰恰相反：<tfoot> 元素不能放置在任何 <tbody> 和 <tr> 元素之後。
隱式 ARIA 角色 rowgroup
允許的 ARIA 角色 任意
DOM 介面 HTMLTableSectionElement

規範

規範
HTML
# the-tfoot-element

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.