HTML에서 캡션이 포함된 테이블을 만들려면 <caption> 태그를 사용합니다. 캡션은 반드시 <table> 태그 바로 뒤에 위치해야 하며, 이렇게 작성된 캡션은 테이블 상단 중앙에 자동으로 표시됩니다.
캡션은 스크린 리더 사용자에게도 테이블의 내용을 알려주는 역할을 하기 때문에, 웹 접근성 측면에서도 매우 유용한 요소입니다.
예제 코드
아래 코드를 실행하면 캡션이 있는 HTML 테이블을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th { border: 1px solid black; }
</style>
</head>
<body>
<table>
<caption>Our Technologies</caption>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 테이블 상단에 "Our Technologies"라는 캡션이 표시되고, 그 아래에 IDE와 Database 정보를 담은 2열 테이블이 나타납니다.
정리
캡션 태그 사용 시 기억할 핵심 사항은 다음과 같습니다.
- 위치:
<caption>태그는<table>태그 바로 다음에 작성해야 합니다. - 개수 제한: 하나의 테이블에는 캡션을 하나만 사용할 수 있습니다.
- 표시 위치: 기본적으로 테이블 상단 중앙에 표시되며, CSS의
caption-side속성으로 하단 등 위치를 변경할 수 있습니다.