<table> — 표 태그 도감 | 소요유(SOYOYU)

올바른 사용

데이터 표에만 (레이아웃 아님)

caption으로 표 설명

thead·tbody로 헤더·본문 분리

th scope로 행/열 헤더 명시

가격 비교표

<table>
  <caption>요금제 비교 (2026년 6월 기준)</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>9,900원</td>
      <td>5명</td>
    </tr>
  </tbody>
</table>

caption + thead/tbody + scope로 완전한 데이터 표.

CSS display로 디자인

<table>...</table>
<style>
  table { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  thead, tbody, tr { display: contents; }
</style>

display:contents로 시각은 grid, 시맨틱은 table.

자주 보는 안티패턴

레이아웃 용도로 table (90년대 잔재)

데이터를 div grid로 (시리즈 #7 안티패턴)

caption 누락

th 대신 td만 사용

레이아웃 용 table

<table>
  <tr>
    <td><img src="/logo.svg" /></td>
    <td><nav>...</nav></td>
  </tr>
</table>

90년대 잔재. 시맨틱·a11y 모두 깨짐. CSS grid가 정답.

데이터를 div grid

<div className="pricing-grid">
  <div>
    <div>Basic</div>
    <div>9,900원</div>
  </div>
</div>

시리즈

해설

다차원 데이터의 행-열 표현. 시리즈 #7에서 "데이터는 table, 레이아웃은 grid"로 정리한 그 결정 트리의 핵심.

SEO 관점에서 데이터 표는 Table Snippet의 직접 소스. 사용자가 "X 비교", "X 가격" 검색 시 검색 결과에 표 형태로 직접 노출. 같은 데이터를 div grid로 만든 페이지는 — 이 노출 기회 없음.

GEO 관점에서 가장 critical. AI Overviews가 비교 답변을 만들 때 table이 1순위 자료. "A vs B 요금 차이는?"에 표의 행-열 데이터 정확히 인용. div grid는 시각적 배치로 추측 → 자주 틀림.

AEO 관점에서 비교 카드 Featured Snippet의 직접 소스. 가격 비교, 스펙 비교, 통계 비교 페이지의 SEO 가치가 table 마크업에서 결정.

A11y 관점에서 스크린리더의 행-열 네비게이션이 무료. 사용자가 Ctrl+Alt+화살표(NVDA)로 셀 이동하며 각 셀의 헤더를 함께 들음. "Basic, 월 요금, 9900원" 같은 형태.

자주 보는 안티패턴: 레이아웃 용 table(90년대 잔재 — 시맨틱·a11y 모두 깨짐), 데이터를 div grid로(시리즈 #7의 핵심 안티패턴), caption 누락(표가 무엇에 관한인지 모름), th 없이 모든 셀이 td(행/열 헤더의 구분이 사라짐).

table의 5요소 — caption, thead, tbody, tr, th/td. 6번째로 tfoot도 가능. 각각의 시맨틱 역할:

caption: 표의 설명 한 줄
thead: 헤더 행들의 그룹
tbody: 본문 행들의 그룹
tfoot: 합계·요약 행
th: 헤더 셀 (scope로 행/열 명시)
td: 데이터 셀

display: contents로 디자인 자유 — 시리즈 #7에서 다룬 패턴. CSS table { display: grid } + thead, tbody, tr { display: contents }로 시각은 grid, 시맨틱은 table. 디자인 자유도 + 시맨틱 보존.

ARIA grid와의 구분 — role="grid"는 스프레드시트 같은 인터랙티브 데이터 그리드. 일반 비교 표는 <table>이 정답. ARIA grid는 복잡한 키보드 단축키를 직접 구현해야 하므로 대부분의 경우 과함.

반응형 table — 모바일에서 행을 카드로 변환하는 CSS 패턴. 시맨틱은 보존하면서 시각만 변환. 모바일 우선 디자인의 표준 패턴.

TanStack Table 같은 headless 라이브러리 — 정렬·필터·페이지네이션 로직만 제공. 렌더 태그는 사용자가 결정. 시맨틱 table로 렌더하면 a11y 자동.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설