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
|
---
title: '<caption>: 표 설명 요소'
slug: Web/HTML/Element/caption
tags:
- Element
- HTML
- HTML tabular data
- Reference
- Web
translation_of: Web/HTML/Element/caption
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><caption></code> 요소</strong>는 표의 설명 또는 제목을 나타냅니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-taller")}}</div>
<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><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td>{{htmlelement("table")}} 요소. 첫 번째 자식이어야 합니다.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>없음</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLTableCaptionElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
<div class="hidden">
<h3 id="Obsolete_attributes">Obsolete attributes</h3>
<p>The following attributes are obsolete 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")}} {{obsolete_inline}}</dt>
<dd>This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:
<dl>
<dt><code>left</code></dt>
<dd>The caption is displayed to the left of the table.</dd>
<dt><code>top</code></dt>
<dd>The caption is displayed above the table.</dd>
<dt><code>right</code></dt>
<dd>The caption is displayed to the right of the table.</dd>
<dt><code>bottom</code></dt>
<dd>The caption is displayed below the table.</dd>
</dl>
<div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the <a href="/en-US/docs/CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div>
</dd>
</dl>
</div>
<h2 id="사용_일람">사용 일람</h2>
<p><code><caption></code> 요소는 부모 {{htmlelement("table")}} 요소의 첫 번째 자식이어야 합니다.</p>
<p><code><caption></code> 요소를 가진 <code><table></code> 요소가 만약 {{HTMLElement("figure")}} 요소의 유일한 자식인 경우, {{htmlelement("figcaption")}}을 대신 사용하세요.</p>
<h2 id="예제">예제</h2>
<p>다음의 간단한 예제는 설명을 포함한 표를 보입니다.</p>
<pre class="brush: html"><table>
<caption>Example Caption</caption>
<tr>
<th>Login</th>
<th>Email</th>
</tr>
<tr>
<td>user1</td>
<td>user1@sample.com</td>
</tr>
<tr>
<td>user2</td>
<td>user2@sample.com</td>
</tr>
</table></pre>
<div class="hidden">
<pre class="brush: css">caption {
caption-side: top;
align: right;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td {
border: 1px solid black;
}
</pre>
</div>
<p>{{EmbedLiveSample('예제', 650, 100)}}</p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'tables.html#the-caption-element', '<caption>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.caption")}}</p>
|
