HTML 강좌 / 읽기 쉬운 표 만들기: caption, th, scope, 셀 병합

읽기 쉬운 HTML 표는 표의 주제를 설명하고, 각 데이터가 어느 행·열의 제목에 해당하는지 알 수 있게 만듭니다. caption과 th, 필요한 경우 scope를 사용하고, 셀 병합은 관계를 흐리지 않을 때만 적용합니다.

caption으로 표의 주제 밝히기

caption은 표 안에서 표 전체를 설명하는 제목입니다. 보통 table의 첫 번째 자식으로 둡니다. 단순히 페이지에 보이는 문단 제목과 달리, 표 자체와 연결된 설명이라는 점이 중요합니다.

‘방문 인원’처럼 짧은 제목도 좋지만 기간이나 측정 기준이 값의 해석에 필요하다면 캡션이나 가까운 본문에 함께 적으세요. 예컨대 하루의 총인원과 시간대별 인원은 다른 데이터입니다. 캡션은 표를 소개하는 역할이고, 열·행의 개별 이름은 th가 맡습니다.

th와 scope로 데이터의 방향 설명하기

열 이름에는 scope="col", 행 이름에는 scope="row"를 지정하면 제목 셀의 적용 범위를 분명히 할 수 있습니다. 다음 표에서 ‘월요일’ 행과 ‘오전’ 열이 만나는 값은 3명입니다.

<table>
  <caption>요일별 방문 인원</caption>
  <thead>
    <tr>
      <th scope="col">요일</th>
      <th scope="col">오전</th>
      <th scope="col">오후</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">월요일</th>
      <td>3명</td>
      <td>5명</td>
    </tr>
    <tr>
      <th scope="row">화요일</th>
      <td>4명</td>
      <td>6명</td>
    </tr>
  </tbody>
</table>

표에서 값만 한 줄씩 읽어도 뜻을 파악할 수 있는지 확인해 보세요. 머리글과 데이터의 관계가 복잡해질수록 시각적 구분만으로는 부족할 수 있습니다. W3C WAI의 표 접근성 안내에는 표의 구조별 방법이 정리돼 있습니다.

첫 행의 ‘오전’과 ‘오후’에는 scope="col", 첫 열의 ‘월요일’과 ‘화요일’에는 scope="row"가 있습니다. 이 속성은 글자를 굵게 만드는 장식이 아니라 각 제목이 어느 방향의 데이터에 적용되는지 나타냅니다. 표가 단순해 관계가 명백하다면 생략할 수도 있지만, 명시하면 작성자와 보조 기술 모두 관계를 확인하기 쉬워집니다.

colspan과 rowspan은 필요한 경우에만

colspan="2"는 셀이 가로 두 칸을, rowspan="2"는 세로 두 칸을 차지하게 합니다. 예를 들어 두 열의 공통 제목을 한 칸으로 묶을 때 유용하지만, 단순한 표를 꾸미려고 병합하면 제목과 값의 대응을 읽기 어려워질 수 있습니다.

<table>
  <col>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">요일</th>
    <th scope="colgroup" colspan="2">방문 인원</th>
  </tr>
  <tr><th scope="col">오전</th><th scope="col">오후</th></tr>
  <tr><th scope="row">월요일</th><td>3명</td><td>5명</td></tr>
</table>

‘요일’은 두 머리글 행에 걸치고, ‘방문 인원’은 오전·오후 두 열을 묶습니다. 병합 때문에 제목 연결이 더 복잡해진다면 표를 나누거나 구조를 단순하게 다시 설계하세요.

여기서는 첫 번째 열을 col로, 그다음 두 열을 colgroup으로 정의했기 때문에 scope="colgroup"이 가리킬 범위가 분명합니다. 단순히 colspan으로 셀만 넓히고 열 그룹을 정의하지 않으면 시각적인 병합과 의미상의 그룹을 혼동하기 쉽습니다. 이처럼 여러 단계의 머리글이 필요한지부터 판단하고, 필요 없다면 앞의 단순한 표가 더 읽기 쉽습니다.

확인할 점

표를 좁은 화면에서 열어 내용이 잘리지 않는지, 제목 셀과 데이터 셀을 구별할 수 있는지 확인하세요. 복잡한 병합 표는 시각적 검사뿐 아니라 스크린 리더로 읽어 보는 것이 좋습니다. 입력 양식이나 페이지 레이아웃을 표로 만들지 않는 것도 중요합니다.

행·열의 관계를 확인하려면 임의의 숫자 하나를 가리키며 ‘어느 요일의 어느 시간대 값인가?’라고 물어 보세요. 답을 찾으려면 색이나 위치만 추측해야 한다면 머리글 구조를 고쳐야 합니다. 특히 모바일에서 가로 스크롤이 생겼을 때 첫 열을 잃어버리지 않고 값의 의미를 파악할 수 있는지 시험해 보세요.