HTML의 <caption> 태그는 표(table)에 제목을 붙일 때 사용하는 요소입니다. 하나의 표에는 캡션을 단 하나만 정의할 수 있으며, 별도의 스타일을 지정하지 않으면 기본적으로 표 중앙 상단에 정렬되어 표시됩니다.
캡션은 스크린 리더 사용자에게 표의 내용을 미리 알려주는 접근성(Accessibility) 측면에서도 매우 유용하므로, 의미 있는 표를 만들 때는 반드시 함께 사용하는 것이 좋습니다.
caption 태그 예제 코드
아래 예제는 부서별 지출 내역을 담은 표에 'Expenses(지출)'라는 캡션을 추가한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid blue;
}
</style>
</head>
<body>
<table>
<caption>Expenses</caption>
<tr>
<th>Domains</th>
<th>Cost</th>
</tr>
<tr>
<td>Product Development</td>
<td>500000</td>
</tr>
<tr>
<td>Marketing</td>
<td>500000</td>
</tr>
<tr>
<td>Services</td>
<td>100000</td>
</tr>
<tr>
<td>Support</td>
<td>100000</td>
</tr>
<tr>
<td>Maintenance</td>
<td>100000</td>
</tr>
<tr>
<td colspan="2">Total Budget = INR 1300000</td>
</tr>
</table>
</body>
</html>실행 결과
코드 설명
위 예제에서는 여러 열로 구성된 표를 만들고, <caption> 태그를 사용해 표 제목을 지정했습니다. 캡션이 적용된 부분은 다음과 같습니다.
<caption>Expenses</caption>
caption 태그 사용 시 주의사항
- <table> 태그 바로 뒤에 작성: 캡션은 반드시 테이블의 첫 번째 자식 요소로 위치해야 합니다.
- 테이블당 하나만 허용: 두 개 이상의 캡션을 넣으면 유효성 검사에서 오류가 발생합니다.
- CSS로 위치 조절 가능:
caption-side속성(top, bottom 등)을 활용하면 캡션 위치를 변경할 수 있습니다.