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
|
---
title: <tr>
slug: Web/HTML/Element/tr
translation_of: Web/HTML/Element/tr
---
<h2 id="개요">개요</h2>
<p>The <em>HTML Table Row Element</em> (<code><tr></code>) defines a row of cells in a table. Those can be a mix of {{HTMLElement("td")}} and {{HTMLElement("th")}} elements.</p>
<h2 id="사용_문맥">사용 문맥</h2>
<table class="standard-table">
<tbody>
<tr>
<td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">콘텐츠 범주</a></td>
<td>None.</td>
</tr>
<tr>
<td>허용되는 콘텐츠</td>
<td>Zero or more {{HTMLElement("td")}} or {{HTMLElement("th")}} elements, or a mix of them</td>
</tr>
<tr>
<td>태그 생략</td>
<td>The start tag is mandatory. The 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>
<td>허용되는 부모 요소</td>
<td>A {{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element.</td>
</tr>
<tr>
<td>Normative document</td>
<td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td>
</tr>
</tbody>
</table>
<h2 id="속성">속성</h2>
<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></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>참고: </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/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">#RRGGBB code</a> or an <a href="/#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="#HTML.2fSVG.2fX11.c2.a0 Color Keywords">SVG color keyword</a>.
<div class="note"><strong>Usage note: </strong>the {{HTMLElement("tr")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS" title="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>참고: </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>참고: </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="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">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="DOM_인터페이스">DOM 인터페이스</h2>
<p>This element implements the {{domxref("HTMLTableRowElement")}} interface.</p>
<h2 id="예제">예제</h2>
<p>See {{HTMLElement("table")}} for examples on <code><tr></code>.</p>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.tr")}}</p>
<h2 id="같이_보기">같이 보기</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><tr></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 '.'.<</li>
</ul>
</li>
</ul>
<p>{{HTMLRef}}</p>
|
