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