aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/html/element/tr/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/html/element/tr/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/html/element/tr/index.html')
-rw-r--r--files/zh-cn/web/html/element/tr/index.html249
1 files changed, 249 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/element/tr/index.html b/files/zh-cn/web/html/element/tr/index.html
new file mode 100644
index 0000000000..a7b41a75d4
--- /dev/null
+++ b/files/zh-cn/web/html/element/tr/index.html
@@ -0,0 +1,249 @@
+---
+title: <tr>
+slug: Web/HTML/Element/tr
+translation_of: Web/HTML/Element/tr
+---
+<p><strong>HTML <code>&lt;tr&gt;</code> 元素</strong>定义表格中的行。 Those can be a mix of {{HTMLElement("td")}} and {{HTMLElement("th")}} elements.</p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
+ <td>None</td>
+ </tr>
+ <tr>
+ <th scope="row">Permitted content</th>
+ <td>Zero or more {{HTMLElement("td")}} or {{HTMLElement("th")}} elements, or a mix of them</td>
+ </tr>
+ <tr>
+ <th scope="row">Tag omission</th>
+ <td>Start tag is mandatory. End tag may be omitted if the {{HTMLElement("tr")}} element is immediately followed by a {{HTMLElement("tr")}} element, or if the parent table group ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}) element doesn't have any more content</td>
+ </tr>
+ <tr>
+ <th scope="row">Permitted parents</th>
+ <td>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element</td>
+ </tr>
+ <tr>
+ <th scope="row">Permitted ARIA roles</th>
+ <td>Any</td>
+ </tr>
+ <tr>
+ <th scope="row">DOM interface</th>
+ <td>{{domxref("HTMLTableRowElement")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>表格标签支持 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局特性</a>。还有一些过期的特性,你应该避免使用它们,但是可以了解它们,会在你阅读旧代码的时候有所帮助。</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
+ <ul>
+ <li><code>left</code>, aligning the content to the left of the cells</li>
+ <li><code>center</code>, centering the content in the cells</li>
+ <li><code>right</code>, aligning the content to the right of the cells</li>
+ <li><code>justify</code>, widening the spaces in the textual content so that the content is justified in the cells</li>
+ <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "tr")}} and {{htmlattrxref("charoff", "tr")}} attributes {{unimplemented_inline("2212")}}</li>
+ </ul>
+
+ <p>If this attribute is not set, the parent node's value is inherited.</p>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.
+
+ <ul>
+ <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li>
+ <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "tr")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute defines the background color of each cell of the row. It can be either an <a href="/en-US/docs/Web/CSS/color_value#rgb()">hexadecimal <code>#RRGGBB</code> or <code>#RGB</code> value</a> or a <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color keyword</a>.
+ <div class="note"><strong>Usage note: </strong>the {{HTMLElement("tr")}} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS">CSS</a> property {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tr")}} is not set to <code>char</code>, this attribute is ignored.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "tr")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "tr")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
+ <ul>
+ <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+ <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+ <li><code>middle</code>, which will center the text in the cell;</li>
+ <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>See {{HTMLElement("table")}} for examples on <code>&lt;tr&gt;</code>.</p>
+
+<h2 id="Specifications">Specifications</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-tr-element','tr element')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tr-element','tr element')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>1.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("1.0")}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>align/valign</code> attribute</td>
+ <td>1.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}} [1]</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>char/charoff</code> attribute</td>
+ <td>1.0</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}} [2]</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("1.0")}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>align/valign</code> attribute</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}} [1]</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>char/charoff</code> attribute</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}} [2]</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ <tr>
+ <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] See {{bug(915)}}.</p>
+
+<p>[2] See {{bug(2212)}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li>
+ <li>CSS properties and pseudo-classes that may be specially useful to style the <code>&lt;tr&gt;</code> element:
+ <ul>
+ <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li>
+ <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.&lt;</li>
+ </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>