diff options
Diffstat (limited to 'files/zh-cn/web/html/element/tfoot/index.html')
-rw-r--r-- | files/zh-cn/web/html/element/tfoot/index.html | 202 |
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><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> |