---
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>&lt;caption&gt;</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>&lt;caption&gt;</code> 요소는 부모 {{htmlelement("table")}} 요소의 첫 번째 자식이어야 합니다.</p>

<p><code>&lt;caption&gt;</code> 요소를 가진 <code>&lt;table&gt;</code> 요소가 만약 {{HTMLElement("figure")}} 요소의 유일한 자식인 경우, {{htmlelement("figcaption")}}을 대신 사용하세요.</p>

<h2 id="예제">예제</h2>

<p>다음의 간단한 예제는 설명을 포함한 표를 보입니다.</p>

<pre class="brush: html">&lt;table&gt;
  &lt;caption&gt;Example Caption&lt;/caption&gt;
  &lt;tr&gt;
    &lt;th&gt;Login&lt;/th&gt;
    &lt;th&gt;Email&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;user1&lt;/td&gt;
    &lt;td&gt;user1@sample.com&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;user2&lt;/td&gt;
    &lt;td&gt;user2@sample.com&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</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', '&lt;caption&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.caption")}}</p>