HTML tfoot 标签

简介

<tfoot> 标签定义了一个表格的页脚（footer）。<tfoot> 元素必须与 <table> 元素内的 <tbody> 和 <tr> 元素一起使用。

语法

<table>
  <thead>
    <tr>
      <th>表头单元格</th>
      <th>表头单元格</th>
      <th>表头单元格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容单元格</td>
      <td>内容单元格</td>
      <td>内容单元格</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>页脚单元格</td>
      <td>页脚单元格</td>
      <td>页脚单元格</td>
    </tr>
  </tfoot>
</table>

属性

<tfoot> 标签没有属性。

注意事项

• <tfoot> 标签必须在 <table> 元素内部。
• 每个表格只能有一个 <tfoot> 元素。
• <tfoot> 元素必须与 <tbody> 和 <tr> 元素一起使用。

浏览器支持情况

| Chrome | IE | Firefox | Safari | Opera | | --- | --- | --- | --- | --- | | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |

示例

<table>
  <thead>
    <tr>
      <th>商品名称</th>
      <th>数量</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>10</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>20</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>30</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>60</td>
      <td>180</td>
    </tr>
  </tfoot>
</table>

以上代码将展示一个包含表头、表格数据和页脚的表格，页脚是每种水果的数量和总价格的总计。