..

Search

<caption>

HTML <caption> 태그


정의 및 특징

<caption> 태그는 테이블의 캡션(caption, 테이블이나 사진, 삽화 등에 붙는 설명)을 정의할 때 사용합니다.

 

<table> 요소는 단 하나의 <caption> 요소만을 명시할 수 있으며, <caption> 요소는 언제나 <table> 요소 바로 다음에 위치해야 합니다.

 

<caption> 요소의 콘텐츠는 테이블 바로 위쪽에 가운데 정렬되어 표시되지만, CSS의 text-align이나 caption-side 속성을 사용하여 캡션의 위치나 정렬 방법 등을 변경할 수 있습니다.


예제
<table>
    <caption>분식</caption>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
</table>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<caption> 지원함 지원함 지원함 1.0 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <caption> 태그의 align 속성을 더 이상 지원하지 않습니다.


사용할 수 있는 속성

속성명   속성값 설명

align

 

left

right

top

bottom

캡션(caption)의 정렬 방법(alignment)를 명시함.

HTML5에서는 더 이상 지원하지 않음.


CSS 기본값

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

DOM 인터페이스

interface HTMLTableCaptionElement : HTMLElement {};


연관 페이지

HTML 테이블 수업 ⇒


연습문제