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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
title: <col>
slug: Web/HTML/Element/col
tags:
- Element
- HTML
- HTML tabular data
- Reference
- Web
translation_of: Web/HTML/Element/col
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><col></code> 요소</strong>는 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다.</span> {{htmlelement("colgroup")}} 안에서 찾을 수 있습니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td>없음.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td>{{htmlattrxref("span", "colgroup")}} 특성을 지정하지 않은 {{HTMLElement("colgroup")}} 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>없음</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLTableColElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt>{{htmlattrdef("span")}}</dt>
<dd><code><col></code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다.</dd>
</dl>
<div class="hidden">
<h3 id="Deprecated_attributes">Deprecated attributes</h3>
<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p>
<dl>
<dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
<dd>This enumerated attribute specifies how horizontal alignment of each column 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>
</ul>
<p>If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this <code><col></code> element belongs too. If there are none, the <code>left</code> value is assumed.</p>
<div class="note"><strong>Note: </strong>
<ul>
<li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values:
<ul>
<li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a <code><col></code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code><col></code> element, they won't inherit it.</li>
<li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li>
<li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
</ul>
</li>
</ul>
</div>
</dd>
<dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
<dd>
<p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p>
<p>To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.</p>
</dd>
<dt>{{htmlattrdef("char")}} {{deprecated_inline}}</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", "col")}} is not set to <code>char</code>, this attribute is ignored.</dd>
<dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt>
<dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd>
<dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt>
<dd>This attribute specifies the vertical alignment of the text within each cell of the column. 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>
<ul>
<li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code><col></code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code><col></code> element, they won't inherit it.</li>
<li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</li>
<li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
</ul>
</div>
</dd>
<dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
<dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd>
</dl>
</div>
<h2 id="예제">예제</h2>
<p><code><col></code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">주석</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-col-element', '<col>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.col")}}</p>
|
