HTML <tfoot> 标签

tfoot 标签定义表格的页脚(脚注或表注)。该标签用于组合HTML表格中的表注内容,一般用来做一组表格中各列的汇总行。


实例

带有 thead、tbody 以及 tfoot 元素的 HTML 表格:

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. thead {color:green}
  5. tbody {color:blue;height:50px}
  6. tfoot {color:red}
  7. </style>
  8. </head>
  9. <body>
  10. <table border="1">
  11. <thead>
  12. <tr>
  13. <th>月份</th>
  14. <th>结余</th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr>
  19. <td>1月</td>
  20. <td>$100</td>
  21. </tr>
  22. <tr>
  23. <td>2月</td>
  24. <td>$80</td>
  25. </tr>
  26. </tbody>
  27. <tfoot>
  28. <tr>
  29. <td>汇总</td>
  30. <td>$180</td>
  31. </tr>
  32. </tfoot>
  33. </table>
  34. </body>
  35. </html>

定义和用法

<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组,而 tbody 元素用于对 HTML 表格中的主体内容进行分组。

注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。


浏览器支持

元素
<tfoot>YesYesYesYesYes

HTML 与 XHTML 之间的差异


提示和注释:

注释: 内部必须拥有 标签!

注释:<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为浏览器不太友好的支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。


可选的属性

属性描述
align
  • right
  • left
  • center
  • justify
  • char
定义 tfoot 元素中内容的对齐方式。
charcharacter规定根据哪个字符来进行文本对齐。
charoffnumber规定第一个对齐字符的偏移量。
valign
  • top
  • middle
  • bottom
  • baseline
规定 tfoot 元素中内容的垂直对齐方式。

全局属性

<tfoot> 标签支持 HTML 中的 全局属性


事件属性

<tfoot> 标签支持 HTML 中的 事件属性


更多实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, th, td {
  6. border: 1px solid black;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>tfoot 元素内容居中对齐</h1>
  12. <table style="width:100%">
  13. <tr>
  14. <th>月份</th>
  15. <th>结余</th>
  16. </tr>
  17. <tr>
  18. <td>1月</td>
  19. <td>$100</td>
  20. </tr>
  21. <tr>
  22. <td>2月</td>
  23. <td>$80</td>
  24. </tr>
  25. <tfoot style="text-align:center">
  26. <tr>
  27. <td>汇总</td>
  28. <td>$180</td>
  29. </tr>
  30. </tfoot>
  31. </table>
  32. </body>
  33. </html>