SOYOYU
표

<th>

헤더 셀. scope 속성으로 행/열 헤더 명시.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

●●●○○중간

표 헤더 텍스트가 검색의 표 추출 라벨로.

GEO

●●●●○높음

AI가 데이터 셀에 라벨 매핑. 어느 열의 어느 값인지 정확.

AEO

●●●●○높음

답변에서 표 데이터를 인용할 때 헤더가 라벨.

A11y

●●●●●결정적

데이터 셀 발화 시 해당 행/열 헤더 자동 함께 발화. scope가 그 매커니즘.

올바른 사용

  • 헤더 셀에 td 대신 th
  • scope=col(열 헤더) 또는 scope=row(행 헤더)
  • 복잡한 표는 headers 속성으로 셀-헤더 명시 연결
  • abbr 속성으로 약어 형태
열 헤더 + 행 헤더
<table>
  <caption>요금제별 기능</caption>
  <thead>
    <tr>
      <th scope="col">요금제</th>
      <th scope="col">사용자 수</th>
      <th scope="col">저장공간</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Basic</th>
      <td>5명</td>
      <td>10GB</td>
    </tr>
    <tr>
      <th scope="row">Pro</th>
      <td>25명</td>
      <td>100GB</td>
    </tr>
  </tbody>
</table>

열 헤더(scope=col) + 행 헤더(scope=row). 데이터 셀 발화 시 둘 다 함께.

복잡한 표 headers 속성
<th id="region">지역</th>
<th id="q1">Q1</th>
<th id="q2">Q2</th>
...
<td headers="region q1">서울 Q1 데이터</td>

scope만으로 부족한 복잡한 표. id + headers로 명시 연결.

자주 보는 안티패턴

  • 헤더 셀인데 td
  • scope 누락
  • scope를 td에 박기 (th에만)
  • row 헤더 누락 (첫 열을 td로)
행 헤더가 td
<tr>
  <td>Basic</td>
  <td>5명</td>
  <td>10GB</td>
</tr>

Basic이 행 헤더인데 td. 스크린리더가 "5명, 10GB"만 발화 — Basic이 사라짐.

scope 누락
<th>요금제</th>
<th>요금</th>

열/행 헤더 구분 정보 사라짐. 일부 환경에서 자동 추론하지만 명시가 안전.

해설

표의 헤더 셀. scope 속성으로 열 헤더(col) 또는 행 헤더(row)를 명시. td(데이터 셀)와 구분되는 시맨틱이 스크린리더의 셀 발화, AI의 데이터 매핑에 결정적.

SEO 관점에서 th의 텍스트가 표 헤더 라벨로 검색의 표 추출에 활용. "X의 Y값은?" 같은 검색 매칭에 th가 컨텍스트.

GEO 관점에서 AI가 데이터 셀에 라벨을 매핑하는 핵심. "Pro 요금제의 저장공간은?" 답변 시 — Pro 행 헤더 + 저장공간 열 헤더로 100GB 셀 식별. th + scope가 이 매핑의 기반.

A11y 관점에서 가장 critical. 스크린리더가 데이터 셀을 발화할 때 해당 행/열 헤더를 자동 함께 발화. scope가 그 매커니즘 — "Pro, 저장공간, 100GB" 같은 형태. scope 없거나 th가 td면 "100GB"만 발화 — 무엇의 100GB인지 모름.

자주 보는 안티패턴: 행 헤더가 td(첫 열이 Basic, Pro, Enterprise 같은 라벨인데 td로 박으면 행 헤더 시맨틱 손실), scope 누락(일부 환경에서 자동 추론하지만 명시가 안전), scope를 td에 박기(scope는 th에만 — td의 scope는 무시), 데이터 셀에 th(데이터인데 헤더 시맨틱).

scope 속성의 4가지 값:

  • col: 이 셀이 열 헤더
  • row: 이 셀이 행 헤더
  • colgroup: 여러 열의 헤더
  • rowgroup: 여러 행의 헤더

대부분의 경우 col과 row로 충분. colgroup·rowgroup은 다단계 헤더에.

headers 속성 (셀의) — 복잡한 표에서 셀과 헤더를 명시적으로 연결. 표가 복잡해 scope만으로 부족할 때:

<th id="region">지역</th>
<th id="2025">2025</th>
<td headers="region 2025">서울 2025년 데이터</td>

abbr 속성 — 헤더의 축약 형태. 스크린리더가 데이터 셀을 발화할 때 긴 헤더 대신 축약을 사용. "2026년 1분기 매출" 헤더에 abbr="Q1"로 두면 "Q1, 1,250"으로 간결 발화.

<th colspan="N"> — 다단계 헤더 또는 행 그룹 라벨. 셀 병합.

도감의 hub 페이지에서 td/th 적용 — 카드 그리드는 table이 아닌 ul + li로 마크업. 데이터 표가 아닌 카드 목록이라 시리즈 #7의 결정 트리에 따라 목록이 정답. 다만 시리즈 #5에서 본 비교 페이지나 시리즈 #7에서 본 가격표가 들어가는 페이지에서는 table + th + td.