HTML에서 표에 캡션을 추가하려면 <caption> 태그를 사용합니다. 캡션은 기본적으로 표의 상단 중앙에 표시되며, 표의 내용이 무엇인지 한눈에 알려주는 제목 역할을 합니다. 또한 스크린 리더 사용자에게 표 정보를 전달하는 접근성 측면에서도 매우 유용한 요소입니다.
예제
아래 예제에서는 "Indian Cricketers(인도 크리켓 선수)"라는 캡션을 표에 추가했습니다. 코드를 직접 실행해 보면서 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Cricketers</h2>
<table style = "width:100%">
<caption>Indian Cricketers</caption>
<th>Name</th>
<tr>
<td>Sachin Tendulkar</td>
</tr>
<tr>
<td>Virat Kohli</td>
</tr>
</table>
</body>
</html>캡션 위치 조정하기
CSS의 caption-side 속성을 활용하면 캡션의 위치를 자유롭게 변경할 수 있습니다. 예를 들어 caption { caption-side: bottom; }과 같이 작성하면 캡션이 표 하단에 표시됩니다. 또한 text-align 속성으로 캡션 텍스트를 좌측, 우측 또는 중앙으로 정렬할 수도 있습니다.