diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/html/element/thead | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/html/element/thead')
-rw-r--r-- | files/ko/web/html/element/thead/index.html | 270 |
1 files changed, 270 insertions, 0 deletions
diff --git a/files/ko/web/html/element/thead/index.html b/files/ko/web/html/element/thead/index.html new file mode 100644 index 0000000000..50164bfebc --- /dev/null +++ b/files/ko/web/html/element/thead/index.html @@ -0,0 +1,270 @@ +--- +title: <thead> +slug: Web/HTML/Element/thead +translation_of: Web/HTML/Element/thead +--- +<h2 id="개요">개요</h2> + +<p>The <em>HTML Table Head Element</em> (<code><thead></code>) defines a set of rows defining the head of the columns of the table.</p> + +<h2 id="사용_문맥">사용 문맥</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">콘텐츠 범주</a></td> + <td>None.</td> + </tr> + <tr> + <td>허용되는 콘텐츠</td> + <td>Zero or more {{ HTMLElement("tr") }} elements.</td> + </tr> + <tr> + <td>태그 생략</td> + <td>The start tag is mandatory. The end tag may be omitted if the {{ HTMLElement("thead") }} element is immediately followed by a {{ HTMLElement("tbody") }} or {{ HTMLElement("tfoot") }} element.</td> + </tr> + <tr> + <td>허용되는 부모 요소</td> + <td>A {{ HTMLElement("table") }} element. The {{ HTMLElement("thead") }} must appear after any {{ HTMLElement("caption") }} or {{ HTMLElement("colgroup") }} element, even implicitly defined, but before any {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }} and {{ HTMLElement("tr") }} element.</td> + </tr> + <tr> + <td>Normative document</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element">HTML5, section 4.9.6</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD">HTML4.01, section 11.2.3</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") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</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 cell</li> + <li><code>center</code>, centering the content in the cell</li> + <li><code>right</code>, aligning the content to the right of the cell</li> + <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> + <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "thead") }} and {{ htmlattrxref("charoff", "thead") }} attributes {{ unimplemented_inline("2212") }}.</li> + </ul> + + <p>If this attribute is not set, the <span style="font-family: courier new;">left</span> value is assumed.</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 <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li> + <li>To achieve the same effect as the <span style="font-family: courier new;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "thead") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt> + <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: + <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><span style="font-family: courier new;">black</span> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">green</span> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">silver</span> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">lime</span> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">gray</span> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">olive</span> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">white</span> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">yellow</span> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">maroon</span> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">navy</span> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">red</span> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">blue</span> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">purple</span> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">teal</span> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">fuchsia</span> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> + <td><span style="font-family: courier new;">aqua</span> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{ HTMLElement("thead") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</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 <span style="font-family: courier new;">char</span>, 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", "thead") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "thead") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</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") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</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><span style="font-family: courier new;">baseline</span>, 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 <span style="font-family: courier new;">bottom</span>.</li> + <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li> + <li><span style="font-family: courier new;">middle</span>, which will center the text in the cell;</li> + <li><span style="font-family: courier new;">top</span>, 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 <code><a href="/en/DOM/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></code> interface.</p> + +<h2 id="예제">예제</h2> + +<p>See {{ HTMLElement("table") }} for examples on<code> <thead></code>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>기능</th> + <th>Chrome</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>{{ CompatGeckoDesktop("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>1.0</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</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>기능</th> + <th>Android</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>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>align/valign</code> 속성</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("915") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>char/charoff</code> 속성</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{ bug("2212") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<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("tr") }};</li> + <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: courier new;"><thead></span> 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> |