웹 표의 제목 줄이 헷갈릴 때: th와 scope 사용하기

SmartInfoBank 운영자 · 작성 2026-10-22 · 수정 2026-10-22 · 7분

웹 문서를 작성할 때 표를 구성하면서 셀 안의 글자만 굵게 만들거나 배경색만 입혀 제목처럼 보이게 만드는 경우가 많습니다. 화면을 눈으로 볼 때는 어떤 칸이 항목 이름이고 어떤 칸이 실제 수치인지 바로 구별할 수 있지만, 웹 브라우저나 보조 공학 기기는 단순한 모양만으로 데이터 간의 상하좌우 관계를 파악하지 못합니다. 데이터를 올바르게 전달하려면 표 머리글인 <th> 태그와 헤더의 범위를 지정하는 scope 속성을 정확히 결합해야 합니다.

화면 표시용 굵은 글씨와 실제 표 헤더의 차이

일반적으로 데이터 표는 가로 방향(행)과 세로 방향(열)의 교차 지점에 값이 위치합니다. 많은 제작자가 일반 데이터 셀인 <td>에 굵은 글씨(<strong>)나 시각적 효과만 부여하여 제목 행을 흉내 냅니다. 하지만 시각적 표현만으로는 기계적 연결 관계가 만들어지지 않습니다.

W3C WAI — two headers table 지침에 따르면, 보조 기술 사용자가 표를 탐색할 때 셀의 값 자체뿐만 아니라 그 값이 어떤 열과 어떤 행에 속해 있는지가 함께 전달되어야 합니다. 단순히 숫자 '2'가 적힌 칸에 도달했을 때, 이것이 '품목'의 값인지 '수량'의 값인지, 혹은 '샘플A'의 데이터인지 알 수 없으면 표의 맥락이 단절됩니다.

th 태그와 scope 속성의 기본 원리

표에서 머리글 역할을 하는 셀은 일반 데이터 셀(<td>) 대신 <th>를 사용하여 정의합니다. 여기에 scope 속성을 함께 선언함으로써 해당 헤더가 표의 어느 방향 데이터와 연관되는지 명시적으로 브라우저에 알립니다.

• scope="col": 해당 헤더 셀이 위치한 열(Column) 전체의 데이터 셀들과 관계를 맺습니다. 주로 최상단 행에 위치하는 열 제목에 적용합니다.
• scope="row": 해당 헤더 셀이 위치한 행(Row) 전체의 데이터 셀들과 관계를 맺습니다. 주로 각 줄의 첫 번째 칸에 위치하는 행 제목에 적용합니다.

HTML 코드를 안전하게 다루는 원칙은 HTML 이스케이프 가이드에서 설명한 것처럼 태그 문법을 정확하게 마크업하는 데서 출발합니다. 상단 열 제목과 좌측 행 제목이 공존하는 양방향 표에서는 두 속성 값을 올바른 위치에 나누어 부여해야 탐색 시 혼선이 생기지 않습니다.

가상 품목 표 구조와 단계별 적용 순서

열 제목으로 '품목'과 '수량'이 있고, 첫 번째 행 제목으로 '샘플A'가 주어졌을 때 데이터 '2'를 묶는 마크업 작성 순서는 다음과 같습니다.

1. 표의 정체성을 알리는 <caption> 요소를 추가하여 스크린 리더 사용자가 '표 탐색 모드'에서 해당 표를 즉시 식별할 수 있도록 합니다.
2. 첫 번째 행(<tr>)을 열고, 열의 제목이 되는 셀들에 <th scope="col">를 지정합니다.
3. 데이터가 시작되는 다음 행(<tr>)의 첫 번째 칸에는 행의 기준 이름이 되는 <th scope="row">를 입력합니다.
4. 이어지는 실제 수치나 세부 정보 셀에는 <td> 태그를 사용하여 순수 데이터로 배치합니다.

실제 코드로 표현하면 다음과 같은 형태가 됩니다.

<table> 
  <caption>가상 품목별 수량 현황</caption>
  <tr>
    <th scope="col">품목</th>
    <th scope="col">수량</th>
  </tr>
  <tr>
    <th scope="row">샘플A</th>
    <td>2</td>
  </tr>
</table>

검증 기준과 잘못된 구현 사례 비교

아래는 표준 명세에 부합하는 기준과 단순 시각 스타일링 간의 구체적인 구현 차이입니다.

열 제목 품목/수량 두 개에 th scope=col, 행 제목 샘플A에는 th scope=row, 데이터 수량2에는 td를 쓴다. 화면의 굵은 글씨만으로 관계를 전달하는 경우와 비교한다.

자주 발생하는 대표적인 오류는 다음과 같습니다.

• 모든 셀을 td로 작성하고 글자 굵기만 변경한 경우: 시각적으로는 구분되지만 마크업 트리에 제목 구조가 누락되어 보조 기술이 셀 좌표를 읽을 때 상위 헤더를 연계하지 못합니다.
• 열 제목과 행 제목 모두에 scope="col"을 남발한 경우: 좌측 머리글의 영향 범위가 가로 행이 아닌 세로 열로 왜곡되어 아래쪽 무관한 행들과 잘못 연결됩니다.
• 표를 단순 화면 배치나 레이아웃 목적으로 남용한 경우: 데이터 간의 교차 관계가 없는 일반 문단이나 버튼을 <table>로 감싸면 의미론적 구조가 심각하게 왜곡됩니다.

scope 속성이 보장하지 못하는 구조적 한계

단순한 1단계 상단 열 헤더와 1단계 좌측 행 헤더 구조에서는 scope="col" 및 scope="row" 지정만으로도 충분한 접근성이 확보됩니다. 그러나 여러 층으로 병합된 다단 헤더(예: 상위 카테고리 아래 하위 세부 항목이 나뉘는 2단계 이상 표)나, 중간에 요약 행이 복합적으로 얽혀 있는 구조에서는 단순 scope 선언만으로 모든 데이터 관계를 완벽히 묶을 수 없습니다.

복합적인 표 구조에서는 각각의 셀에 고유한 id를 부여하고 데이터 셀에서 headers 속성으로 연결 대상을 명시적으로 열거하는 심화 기술이 요구될 수 있습니다. 따라서 작업 대상 표의 구조가 단순한 격자형인지 다층 병합 구조인지 먼저 검토하고 표준 마크업을 적용해야 합니다.