<caption>: 표 설명 요소

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

* Some parts of this feature may have varying levels of support.

HTML <caption> 요소는 표의 설명 또는 제목을 나타냅니다.

시도해 보기

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tr>
    <td></td>
    <th scope="col" class="heman">He-Man</th>
    <th scope="col" class="skeletor">Skeletor</th>
  </tr>
  <tr>
    <th scope="row">Role</th>
    <td>Hero</td>
    <td>Villain</td>
  </tr>
  <tr>
    <th scope="row">Weapon</th>
    <td>Power Sword</td>
    <td>Havoc Staff</td>
  </tr>
  <tr>
    <th scope="row">Dark secret</th>
    <td>Expert florist</td>
    <td>Cries at romcoms</td>
  </tr>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font: 1.4rem molot;
  text-shadow:
    1px 1px 1px #fff,
    2px 2px 1px #000;
}

.skeletor {
  font: 1.7rem rapscallion;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 #fff,
    0 0 9px #000;
}

콘텐츠 카테고리 가능한 콘텐츠 태그 생략 가능한 부모 요소 가능한 ARIA 역할 DOM 인터페이스

없음

플로우 콘텐츠.

바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.

<table> 요소. 첫 번째 자식이어야 합니다.

없음

HTMLTableCaptionElement

특성

이 요소는 전역 특성만 포함합니다.

Deprecated attributes

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.

align

This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:

left

The caption is displayed to the left of the table.

top

The caption is displayed above the table.

right

The caption is displayed to the right of the table.

bottom

The caption is displayed below the table.

경고 : Do not use this attribute, as it has been deprecated. The <caption> element should be styled using the CSS properties caption-side and text-align.

사용 일람

<caption> 요소는 부모 <table> 요소의 첫 번째 자식이어야 합니다.

<caption> 요소를 가진 <table> 요소가 만약 <figure> 요소의 유일한 자식인 경우, <figcaption>을 대신 사용하세요.

예제

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

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>

caption {
  caption-side: top;
  align: right;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}