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

打印页面