HTML <caption> 태그

정의와 사용법

<caption> 태그 정의 테이블 제목.

caption 태그는 table 태그 다음에 반드시 올 수 있습니다. 각 테이블에 대해 제목을 정의할 수 있습니다.

추천:기본적으로, 테이블 제목은 테이블 위쪽 가운데 정렬됩니다. 하지만, CSS 속성 text-align과 caption-side를 사용하여 제목을 정렬하고 배치할 수 있습니다.

다른 것을 참조하세요:

HTML DOM 참조 매뉴얼:Caption 객체

예시

예제 1

제목이 있는 테이블:

<table>
  <caption>每月存款</caption>
  <tr>
    <th>월</th>
    <th>예금</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>3000 원</td>
  </tr>
</table>

직접 테스트해 보세요

예제 2

정위치 테이블의 제목(CSS 사용):

<table>
  <caption style="text-align:right">제存款</caption>
  <tr>
    <th>월</th>
    <th>예금</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>3000 원</td>
  </tr>
</table>
<br>
<table>
  <caption style="caption-side:bottom">저의 예금</caption>
  <tr>
    <th>월</th>
    <th>예금</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>3000 원</td>
  </tr>
</table>

직접 테스트해 보세요

전역 속성

<caption> 라벨은 다음 이벤트 속성을 지원합니다 HTML에서의 전역 속성.

이벤트 속성

<caption> 라벨은 다음 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <caption> 요소:

caption {
  display: table-caption;
  text-align: center;
}

직접 테스트해 보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원