<caption>

<caption> 태그는 표의 제목을 설정합니다. 테이블 제작시 접근성 향상을 위한 제목을 적어주어야 합니다.

---

<caption>

<caption> 태그는 표의 제목을 설정합니다.

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	적용(<caption> ~ </caption>)
버전	HTML4
시각적 표현	가운데 정렬
사용성	★★★☆☆

정의(Definition)

• <caption> 태그는 표의 제목을 설정합니다.
• <caption> 태그는 기본적으로 가운데 정렬로 표시됩니다.
• align 속성은 HTML5에서 지원되지 않습니다.

table과 관련된 태그(table Related Tags)

• <table> 태그는 표를 설정합니다.
• <caption> 태그는 표의 제목을 설정합니다.
• <thead> 태그는 표의 헤더 영역을 그룹화합니다.
• <tbody> 태그는 표의 본문 영역을 그룹화합니다.
• <tfoot> 태그는 표의 푸터 영역을 그룹화합니다.
• <tr> 태그는 표의 행을 설정합니다.
• <td> 태그는 표의 열(셀)을 설정합니다.
• <th> 태그는 행이나 열에 타이틀을 설정합니다.
• <colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
• <col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.

예제1(Sample)

표를 설정한 예제입니다.

표 제목 설정

표 제목1	표 제목2
표 내용1	표 내용1
표 내용2	표 내용2

HTML

CSS

SCRIPT

<table class="sample-table">
    <caption>표 제목 설정</caption>
    <thead>
        <tr>
            <th>표 제목1</th>
            <th>표 제목2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>표 내용1</td>
            <td>표 내용1</td>
        </tr>
        <tr>
            <td>표 내용2</td>
            <td>표 내용2</td>
        </tr>
    </tbody>
</table>

table th, 
table td {
    border: 1px solid #ccc;
    padding: 10px;
}

//javascript none

속성(Property)

속성	값(예)	설명	버전
align	left right top bottom	요소의 정렬을 왼쪽으로 설정합니다. 요소의 정렬을 오른쪽으로 설정합니다. 요소의 정렬을 위쪽으로 설정합니다. 요소의 정렬을 아래쪽으로 설정합니다.

호환성(Compatibility)

						6	7	8	9	10	11
<caption>	○	○	○	○	○	○	○	○	○	○	○	○	○	○
align	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고 사이트(Reference)

• MDN
• W3C

---