HTML caption 태그: 표 제목과 위·아래 위치 지정하기

HTML의 <caption>은 표 전체의 제목이나 간단한 설명을 나타냅니다. table 안의 첫 번째 자식 요소로 배치하고, 화면 위·아래의 표시 위치는 CSS의 caption-side로 조절합니다.

표 제목과 열 제목 구분하기

caption은 “무엇에 대한 표인가”를 설명하고 th는 특정 열이나 행의 제목을 나타냅니다. caption을 표 첫 행의 td로 대신 만들면 표 제목과 데이터 셀의 관계가 달라집니다. 표를 빠르게 훑거나 보조 기술로 탐색할 때 목적을 알 수 있도록 “표 1”만 적기보다 대상과 범위를 구체적으로 적습니다.

하나의 table에는 caption을 하나만 둡니다. 긴 해석·주의점·데이터 출처가 필요하면 표 가까운 본문에 추가하고, 표 제목을 여러 caption으로 나누지 않습니다.

전체 예제로 caption 위치 확인하기

아래 코드를 table-caption.html로 저장한 뒤 브라우저에서 엽니다. 숫자는 표 구조를 설명하기 위한 실습용 데이터입니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>표 제목 배치</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    .jb-table-scroll { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
    caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
  </style>
</head>
<body>
  <h1>실습 자료</h1>
  <div class="jb-table-scroll">
    <table class="jb-table-01">
      <caption>실습용 자료실의 분류별 예제 문서 수</caption>
      <thead>
        <tr><th scope="col">분류</th><th scope="col">문서 수</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">HTML</th><td>3</td></tr>
        <tr><th scope="row">CSS</th><td>2</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

표 위에 “실습용 자료실의 분류별 예제 문서 수”가 표시되고, 그 아래에는 분류·문서 수 열과 두 데이터 행이 나타납니다. caption을 이용해 표의 목적을 설명하고 scope를 지정한 th로 각 행·열의 제목을 구분했습니다.

CSS의 caption-side: top을 caption-side: bottom으로 바꾸고 새로고침해 보세요. 제목이 표 아래로 이동하지만 HTML에서는 여전히 table의 첫 번째 자식입니다. 다시 top으로 바꾸면 원래 위치로 돌아갑니다. 좌우 정렬은 text-align으로 바꾸며, 사용하지 않는 align 속성으로 위치를 조절하지 않습니다.

표 제목을 작성할 때 주의할 점

caption은 보이는 제목이면서 표의 접근 가능한 이름을 제공하는 데 도움이 됩니다. 실제 화면 낭독 동작은 브라우저·보조 기술과 다른 접근성 속성의 영향을 받으므로, caption 하나를 추가했다는 이유만으로 복잡한 표의 접근성이 모두 해결되었다고 판단하지 않습니다. 머리글·데이터 셀 관계와 읽기 순서도 함께 확인합니다.

caption의 배경은 table 배경을 설정했다고 항상 같은 색이 적용되는 것은 아니므로 필요하면 caption에 별도로 지정합니다. 표를 그림 단위로 묶고 figcaption을 함께 사용하는 구조에서는 같은 제목을 중복 안내하지 않도록 전체 구조를 검토하세요. 관련 규칙과 예제는 MDN caption 문서에서 확인할 수 있습니다.