HTML - <tfoot>標籤

<tfoot> 標籤用於在 HTML 表格中分組頁尾內容。HTML <tfoot> 標籤用作 HTML 表格 (<table>) 的子元素。

<tfoot> 標籤經常用於顯示列總計，並可用於總結表格中的列。傳統上，<tfoot> 標籤會使用 CSS 進行樣式設定以突出顯示列總計。預設情況下，<thead>、<tbody> 和 <tfoot> 元素不會影響表格的組織方式。但是，您可以使用 CSS 為這些元素設定樣式。

語法

<tfoot>...</tfoot>

屬性

HTML tfoot 標籤支援 HTML 的全域性和事件屬性。以下列出的屬性已棄用，因此請使用 CSS 屬性而不是這些屬性。

屬性	值	描述
align	left right center justify	指定文字內容的對齊方式（已棄用）。
bgcolor	color	指定每列單元格的背景顏色（已棄用）。
char	character	指定每列單元格內容相對於某個字元的對齊方式（已棄用）。
charoff	number	指定列單元格內容相對於由 char 屬性指定的對齊字元的偏移字元數（已棄用）。
valign	baseline bottom middle top	指定每列單元格的垂直對齊方式（已棄用）。

HTML tfoot 標籤示例

以下示例將說明 tfoot 標籤的用法。在哪裡、何時以及如何使用 tfoot 標籤以及如何設定表格頁尾部分的樣式。

建立表格頁尾

以下是一個我們將 <tfoot> 標籤用於 HTML 表格的示例。

<!DOCTYPE html>
<html>
<body>
   <table border="1">
   <thead>
      <tr>
         <th>Students</th>
         <th>English Marks</th>
         <th>Hindi Marks</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th colspan="3">Juliet - the best Performer!</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>John</td>
         <td>28</td>
         <td>25</td>
      </tr>
      <tr>
         <td>Peterson</td>
         <td>25</td>
         <td>25</td>
      </tr>
      <tr>
         <td>Juliet</td>
         <td>29</td>
         <td>29</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

表格頁尾樣式

考慮另一個場景，我們將 <tfoot> 標籤用於表格併為其應用 CSS。

<!DOCTYPE html>
<html>
   <style>
      tfoot {
         background-color: #3f87a6;
      }
   </style>
<body>
   <table border="1">
      <thead>
         <tr>
            <th>Items</th>
            <th>Price</th>
         </tr>
      </thead>
   <tfoot>
      <tr>
         <th>Total</th>
         <th>75</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>5-Star</td>
         <td>10</td>
      </tr>
      <tr>
         <td>Dairy-Milk</td>
         <td>45</td>
      </tr>
      <tr>
         <td>KitKat</td>
         <td>20</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

對齊表格頁尾元素

讓我們考慮以下示例，我們將使用 CSS 將 <tfoot> 標籤內的內容向右對齊。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:50%">
      <tr>
         <th>Students</th>
         <th>Gathered Amount</th>
      </tr>
      <tr>
         <td>Ram</td>
         <td>$200</td>
      </tr>
      <tr>
         <td>Suresh</td>
         <td>$800</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>$500</td>
      </tr>
      <tfoot style="text-align:right">
         <tr>
            <td>Total</td>
            <td>$1500</td>
         </tr>
         </tfoot>
   </table>
</body>
</html>

表格頁尾元素的垂直對齊

在以下示例中，我們將使用 vertical-align 屬性並將 <tfoot> 標籤內的內容垂直居中對齊。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #82E0AA;
      }
   </style>
<body>
   <table style="width:40%">
      <tr>
         <th>ID</th>
         <th>Employee</th>
      </tr>
      <tr>
         <td>12234</td>
         <td>Maya</td>
      </tr>
      <tr>
         <td>12235</td>
         <td>John</td>
      </tr>
      <tr>
         <td>12236</td>
         <td>Kevin</td>
      </tr>
      <tfoot style="vertical-align:middle">
         <tr style="height:100px">
            <td>Total Employees</td>
            <td>3</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

支援的瀏覽器

標籤
tfoot	是	是	是	是	是

html_tags_reference.htm

列印頁面