initial commit

1 files changed, 202 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/tfoot/index.html b/files/zh-cn/web/html/element/tfoot/index.html
new file mode 100644
index 0000000000..ecfae6ee88
--- /dev/null
+++ b/files/zh-cn/web/html/element/tfoot/index.html
@@ -0,0 +1,202 @@
+---
+title: <tfoot>
+slug: Web/HTML/Element/tfoot
+translation_of: Web/HTML/Element/tfoot
+---
+<p id="Summary"><strong>HTML 元素<code>&lt;tfoot&gt;</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>&lt;tfoot&gt;</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>&lt;tfoot&gt;</code>时可能会有特殊效果的CSS属性和伪类：
+  <ul>
+   <li>{{cssxref(":nth-child")}}伪类：设置列内元素的对齐方式；</li>
+   <li>{{cssxref("text-align")}}属性：可设置单元格内容与同一字符对齐，例如'.'。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>