1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
---
title: <tfoot>
slug: Web/HTML/Element/tfoot
translation_of: Web/HTML/Element/tfoot
---
<p id="Summary"><strong>HTML 元素<code><tfoot></code> </strong> 定义了一组表格中各列的汇总行。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">内容类别</a></th>
<td>无。</td>
</tr>
<tr>
<th scope="row">允许的内容 </th>
<td>0或多个{{HTMLElement("tr")}} 元素。</td>
</tr>
<tr>
<th scope="row">标签省略</th>
<td>开始标签是必需的。.在父元素 {{HTMLElement("table")}} 没有后续内容的情况下，结束标签可被省略。</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>{{HTMLElement("table")}} 元素。{{HTMLElement("tfoot")}} 必须出现在一个或多个 {{HTMLElement("caption")}}，{{HTMLElement("colgroup")}}，{{HTMLElement("thead")}}, {{HTMLElement("tbody")}}，或 {{HTMLElement("tr")}} 元素之后。 注意这是自 HTML5 起有的要求。<br>
{{HTMLVersionInline("4")}} {{HTMLElement("tfoot")}} 元素不能放在任何 {{HTMLElement("tbody")}} 或 {{HTMLElement("tr")}} 元素之后。注意，这与上述 HTML5 的标准相冲突。</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>任意。</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
<td>{{domxref("HTMLTableSectionElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p>此元素包含 <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a>.</p>
<dl>
<dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
<dd>
<p>此枚举属性指定每个单元格内容所使用的水平对齐方式。可选值为：</p>
<ul>
<li><code>left</code>，单元格内容左对齐</li>
<li><code>center</code>，单元格内容居中对齐</li>
<li><code>right</code>，单元格内容右对齐</li>
<li><code>justify</code>，插入空白调整单元格中的文本内容（译者注：即两端对齐）</li>
<li><code>char</code>，将文本内容与一个具有最小偏移量的特定字符对齐，字符和偏移量分别由{{htmlattrxref("char", "tbody")}}和{{htmlattrxref("charoff", "tbody")}}属性定义。{{unimplemented_inline("2212")}}.</li>
</ul>
<p>若此值未设置，则假定为<code>left</code>。</p>
<div class="note">
<p><strong>Note: </strong>此属性在最新标准中已被废弃（不支持），所以请勿使用。</p>
<ul>
<li>为达到与<code>left</code>, <code>center</code>, <code>right</code>或<code>justify</code>相同的效果，请使用 CSS {{cssxref("text-align")}}属性。</li>
<li>为达到与 char 值相同的效果，在 CSS3 中可将{{htmlattrxref("char", "tfoot")}}的值用作{{cssxref("text-align")}}的属性值{{unimplemented_inline}}。</li>
</ul>
</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
<dd>此属性定义了列内单元格的背景色。定义此属性使用'#'作为前缀，其后是定义于<a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>的 6 位十六进制码。
<p>也可使用以下 16 种预定义的色彩字符串之一：</p>
<table style="width: 80%;">
<tbody>
<tr>
<td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>black</code> = "#000000"</td>
<td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>green</code> = "#008000"</td>
</tr>
<tr>
<td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>silver</code> = "#C0C0C0"</td>
<td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>lime</code> = "#00FF00"</td>
</tr>
<tr>
<td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>gray</code> = "#808080"</td>
<td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>olive</code> = "#808000"</td>
</tr>
<tr>
<td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>white</code> = "#FFFFFF"</td>
<td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>yellow</code> = "#FFFF00"</td>
</tr>
<tr>
<td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>maroon</code> = "#800000"</td>
<td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>navy</code> = "#000080"</td>
</tr>
<tr>
<td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>red</code> = "#FF0000"</td>
<td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>blue</code> = "#0000FF"</td>
</tr>
<tr>
<td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>purple</code> = "#800080"</td>
<td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>teal</code> = "#008080"</td>
</tr>
<tr>
<td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>fuchsia</code> = "#FF00FF"</td>
<td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
<td><code>aqua</code> = "#00FFFF"</td>
</tr>
</tbody>
</table>
<div class="note"><strong>Usage Note: </strong>请勿使用此属性，因为这并非标准，且只有某些特定版本的 Microsoft Internet Explorer（IE 浏览器）支持：{{HTMLElement("tfoot")}}元素应使用<a href="/en-US/docs/Web/CSS">CSS</a>设计。若想得到与<strong>bgcolor</strong>属性相似的效果，可在相关的 {{HTMLElement("td")}}或{{HTMLElement("th")}}元素中使用<a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("background-color")}}属性。</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
<dd>此属性设置单元格对齐的基准字符。当对齐数字或货币值时，一个典型值会带有一个句点 (.)。如果{{htmlattrxref("align", "tfoot")}}未设置为<code>char</code>，此属性将被忽略。
<div class="note"><strong>Note: </strong>请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。想要达到与{{htmlattrxref("char", "tbtfootody")}}相同的效果，在 CSS3 中，可将{{cssxref("text-align")}}属性设置为{{htmlattrxref("char", "tfoot")}}的属性值{{unimplemented_inline}}。</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
<dd>此属性用作表明列内数据对于对齐基准字符的偏移字符数，对其基准字符由<code>char</code>属性指定。
<div class="note"><strong>Note: </strong> 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）。</div>
</dd>
</dl>
<dl>
<dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt>
<dd>此属性指定表头（译者注：英文原文为 table header，疑似错误）中每一行内的文本的垂直对齐方式。此属性的可选值为：
<ul>
<li><code>baseline</code>，会使文本尽可能接近单元格底部，但并不向底部对齐，而将它们以字符<a class="external" href="https://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A">基线</a>对齐。如果所有字符的大小相同，此值与<code>bottom</code>的效果相同；</li>
<li><code>bottom</code>，设置文本向下对齐；</li>
<li><code>middle</code>，设置文本居中对齐；</li>
<li>and <code>top</code>，设置文本向上对齐。</li>
</ul>
<div class="note"><strong>Note: </strong> 请勿使用此属性，因为在最新标准中此属性被废弃（且不受支持）：使用 CSS 属性{{cssxref("vertical-align")}}作为替代。</div>
</dd>
</dl>
<h2 id="示例">示例</h2>
<p>请查看{{HTMLElement("table")}}页面中<code><tfoot></code>的相关示例。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.tfoot")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>其他 table 相关的 HTML 元素：{{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
<li>在设计<code><tfoot></code>时可能会有特殊效果的 CSS 属性和伪类：
<ul>
<li>{{cssxref(":nth-child")}}伪类：设置列内元素的对齐方式；</li>
<li>{{cssxref("text-align")}}属性：可设置单元格内容与同一字符对齐，例如'.'。</li>
</ul>
</li>
</ul>
<p>{{HTMLRef}}</p>
|
