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>
特性
内容类别 | 无。 |
---|---|
允许的内容 | 零到多个 <tr> 元素。 |
标签省略 | 开始标签是必须的。如果父代 <table> 元素中没有更多内容,则可以省略结束标记。 |
允许的父元素 |
<table> 元素。<tfoot> 必须出现在任何 <caption> ,<colgroup> ,<thead> ,<tbody> 或 <tr> 元素之后。请注意,这是 HTML5 的要求。在 HTML 4 中,<tfoot> 元素不能放在任何 <tbody> 和 <tr> 元素之后。请注意,这与上述的 HTML5 规范要求背道而驰。 |
允许的 ARIA 角色 | 任意 |
DOM 接口 | HTMLTableSectionElement |
属性
该元素包含了全局属性。
align
该枚举属性指定如何处理每个单元格内容的水平对齐。可能的值是:
-
left
,将内容对齐到单元格的左侧 -
center
,将内容对齐到单元格的中间 -
right
,将内容对齐到单元格的右边 -
justify
,在文本内容中插入空格以便内容在单元格左右对齐 -
char
,通过char
和charoff
定义的最小偏移量,将特定字符的文本内容对齐。
如果未设置该属性,则默认是 left
值。
注意: 不要使用该属性,因为它在最新标准中已过时(不支持)。
- 要实现与
left
,center
,right
或justify
值相同的效果,请使用 CSStext-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
该属性用于指定字符来对齐单元格中的内容。典型的值包括使用一个点号(.)来尝试调整数字或货币值。如果 align
未设置为 char
,则该属性将被忽略。
说明: 不要使用该属性,因为它在最新标准中已过时(不支持)。在 CSS3 中,要实现与
char
相同的效果,可以使用char
属性的值作为text-align
属性的值。未实现
charoff
该属性用于指示从 char 属性指定的对齐字符中偏移的字符数。
说明: 不要使用该属性,因为它在最新标准中已过时(不支持)。
valign
该属性指定了表格标题的每行单元格内文本的垂直对齐方式。该属性的可能值为:
-
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
相关链接
- 其他表格相关的 HTML 元素:
<caption>
,<col>
,<colgroup>
,<table>
,<tbody>
,<td>
,<tbody>
,<th>
,<thead>
,<tr>
; - 有助于设置
<tfoot>
元素的样式的 CSS 属性和伪类:-
:nth-child
伪类,用来设置某一行的样式; -
text-align
属性,用来设置所有单元格内容的对齐方式。
-