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>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
      <th>تسماني
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
      <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>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
      <th>تسماني
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
      <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>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
    <th>تسماني
  </tr>
  <tr>
    <td>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
    <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>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
    <th>تسماني
  </tr>
  <tr>
    <td>كانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانوكانo
    <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: وسط;
  border-color: منتقل کیا جاتا ہے;
}

بھرپائی براہ راست

کروم ایجی فائرفاکس سافری آپرا
کروم ایجی فائرفاکس سافری آپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی