HTML <tfoot> 元素

HTML <tfoot> 元素定义了一组汇总表格列的行。

带有 <tfoot> 元素的 HTML 表格:

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>存款</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>600元</td>
    </tr>
    <tr>
      <td>二位</td>
      <td>300元</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>汇总</td>
      <td>900元</td>
    </tr>
  </tfoot>
</table>

尝试一下 »

截图

带有 <tfoot> 元素的 HTML 表�

特性

内容类别 无。
允许的内容 零到多个 <tr> 元素。
标签省略 开始标签是必须的。如果父代 <table> 元素中没有更多内容,则可以省略结束标记。
允许的父元素 <table> 元素。<tfoot> 必须出现在任何 <caption><colgroup><thead><tbody><tr> 元素之后。请注意,这是 HTML5 的要求。在 HTML 4 中,<tfoot> 元素不能放在任何 <tbody><tr> 元素之后。请注意,这与上述的 HTML5 规范要求背道而驰。
允许的 ARIA 角色 任意
DOM 接口 HTMLTableSectionElement

属性

该元素包含了全局属性

align

已废弃 HTML4.01已过时 HTML5

该枚举属性指定如何处理每个单元格内容的水平对齐。可能的值是:

  • left,将内容对齐到单元格的左侧
  • center,将内容对齐到单元格的中间
  • right,将内容对齐到单元格的右边
  • justify,在文本内容中插入空格以便内容在单元格左右对齐
  • char,通过 charcharoff 定义的最小偏移量,将特定字符的文本内容对齐。

如果未设置该属性,则默认是 left 值。

注意: 不要使用该属性,因为它在最新标准中已过时(不支持)。

  • 要实现与 leftcenterrightjustify 值相同的效果,请使用 CSS text-align 属性。
  • 在 CSS3 中,要实现与 char 值相同的效果,可以使用 char 的值作为 text-align 属性未实现

bgcolor

非标准

该属性定义了列的每个单元格的背景颜色。它是 sRGB 中定义的 6 位十六进制代码之一,以 '#' 为前缀。也可以使用十六种预定义颜色字符串中的一种:

black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF"

使用说明: 不要使用该属性,因为它是非标准的,只在一些版本的 Microsoft Internet Explorer 中实现了。<thead> 元素应该使用 CSS 来设置样式。要实现与类似 bgcolor 属性的效果,可以在相关的 <td><th> 元素上设置 background-color 属性。

char

已废弃 HTML4.01已过时 HTML5

该属性用于指定字符来对齐单元格中的内容。典型的值包括使用一个点号(.)来尝试调整数字或货币值。如果 align 未设置为 char,则该属性将被忽略。

说明: 不要使用该属性,因为它在最新标准中已过时(不支持)。在 CSS3 中,要实现与 char 相同的效果,可以使用 char 属性的值作为 text-align 属性的值。未实现

charoff

已废弃 HTML4.01已过时 HTML5

该属性用于指示从 char 属性指定的对齐字符中偏移的字符数。

说明: 不要使用该属性,因为它在最新标准中已过时(不支持)。

valign

已废弃 HTML4.01已过时 HTML5

该属性指定了表格标题的每行单元格内文本的垂直对齐方式。该属性的可能值为:

  • baseline,将文本尽可能接近单元格的底部,但将其对准在字符的基线上,而不是它们的底部。如果字符大小一致,它与 bottom 的效果相同;
  • bottom,将文本尽可能靠近单元格底部;
  • middle,将文本在单元格中居中;
  • top,将文本尽可能靠近单元格的顶部。

说明: 不要使用该属性,因为它在最新标准中已过时(不支持)。改为在其上设置 CSS vertical-align 属性。

事件属性

<tfoot> 元素支持 HTML 的事件属性

使用说明

  • <tfoot> 元素用于组合 HTML 表格的页脚内容。

  • <tfoot> 元素应该与 <thead><tbody> 元素结合起来使用,用来规定表格的各个部分(页脚、表头、主体)。

  • 通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

  • <tfoot> 元素内部必须包含一个或者多个 <tr> 标签。

  • <thead><tbody><tfoot> 元素默认不会影响表格的布局。不过,您可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。

更多实例

有关 <tfoot> 的示例,请参阅 <table>

规范

规范 状态 备注
HTML Living Standard
tfoot element 的定义
现行的标准 -
HTML5
tfoot element 的定义
推荐 -

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 1 支持 1 支持 支持 支持
align 未知 支持 不支持1 支持 未知 未知
bgcolor 未知 不支持 不支持 支持 未知 未知
char 未知 支持 不支持2 支持 未知 未知
charoff 未知 支持 不支持2 支持 未知 未知
valign 未知 支持 不支持1 支持 未知 未知

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 1 支持 支持 支持
align 未知 未知 支持 不支持1 支持 未知 未知
bgcolor 未知 未知 不支持 不支持 支持 未知 未知
char 未知 未知 支持 不支持2 支持 未知 未知
charoff 未知 未知 支持 不支持2 支持 未知 未知
valign 未知 未知 支持 不支持1 支持 未知 未知

1. 查看 bug 915

2. 查看 bug 2212

相关链接