SOYOYU

<tbody>

표의 본문 행 그룹. 데이터 셀들의 컨테이너.

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

SEO

●●○○○낮음

본문·헤더 분리 신호. 직접 영향은 작음.

GEO

●●●○○중간

AI가 데이터 영역 식별. thead와 분리되어 데이터 추출 정확.

AEO

●●●○○중간

답변 인용에서 데이터 행 단위.

A11y

●●●○○중간

스크린리더의 표 모드에서 헤더/본문 구분.

올바른 사용

  • 데이터 행(들)을 tbody 안에
  • thead·tfoot과 형제
  • table에 여러 tbody 가능 (그룹화)
  • tbody 안 td로 데이터 셀
기본 tbody
<table>
  <thead>
    <tr>
      <th scope="col">요금제</th>
      <th scope="col">월 요금</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Basic</th>
      <td>9,900원</td>
    </tr>
    <tr>
      <th scope="row">Pro</th>
      <td>29,000원</td>
    </tr>
  </tbody>
</table>

데이터 행을 tbody. 행 헤더는 th scope=row.

여러 tbody로 그룹화
<table>
  <caption>지역별 매출</caption>
  <thead>...</thead>
  <tbody>
    <tr><th colspan="3">수도권</th></tr>
    <tr><td>서울</td><td>1,200</td><td>+18%</td></tr>
    <tr><td>인천</td><td>340</td><td>+12%</td></tr>
  </tbody>
  <tbody>
    <tr><th colspan="3">강원·충청</th></tr>
    <tr><td>강원</td><td>180</td><td>+5%</td></tr>
  </tbody>
</table>

행 그룹화에 여러 tbody. 시맨틱 그룹화.

자주 보는 안티패턴

  • tbody 없이 tr 직접
  • tbody 안에 th만 (보통 td가 데이터)
  • 여러 tbody를 활용 안 함 (그룹화 가능한 표인데)
tbody 없이 tr
<table>
  <thead>...</thead>
  <tr><td>Basic</td><td>9,900</td></tr>
  <tr><td>Pro</td><td>29,000</td></tr>
</table>

브라우저가 자동 보정하지만 명시적 tbody가 안전.

해설

표의 본문 행 그룹. 데이터 셀들이 들어가는 컨테이너. thead가 헤더 행, tbody가 데이터 행의 시맨틱 분리.

SEO 관점에서 tbody 자체의 직접 영향은 작지만 — thead와의 분리가 검색엔진의 표 추출 정확도에 기여.

GEO 관점에서 AI가 표 데이터를 추출할 때 tbody의 행들이 진짜 데이터임을 명확히 인지. thead의 라벨과 결합되어 "Basic의 월 요금은 9,900원" 같은 구조화된 데이터 추출.

A11y 관점에서 스크린리더의 표 모드에서 헤더/본문 구분이 명확. 사용자가 헤더 행을 다시 확인할 때 thead로 점프, 데이터 탐색에는 tbody.

자주 보는 안티패턴: tbody 없이 tr 직접(브라우저 자동 보정이지만 명시적 tbody가 안전), 데이터 그룹화 가능한 표에 여러 tbody 활용 안 함(시맨틱 그룹화 기회 손실).

여러 tbody로 그룹화 — table당 여러 tbody 허용. 행 그룹을 시맨틱으로 분리. 예: 지역별 매출 표에서 "수도권", "강원·충청" 같은 지역 그룹을 각각 tbody로. 시각적으로는 행 사이 간격을 tbody 단위로 추가 가능.

<th colspan="N">을 tbody의 첫 행에 두는 패턴 — 행 그룹의 라벨. 위 예시처럼 "수도권"을 tbody 첫 행 + colspan으로 전체 너비. 시각·시맨틱 모두 그룹 헤더.

<table>의 자식 순서 — thead → tbody → tfoot. tfoot은 합계 행이라 tbody 뒤. 다만 과거 사양에서는 tfoot이 tbody 앞 위치도 허용했고, 시각적으로는 합계가 표 맨 아래로 자동 배치되어 순서 의존성이 낮다.

display: contents 적용 — 시리즈 #7의 디자인 자유 패턴. tbody { display: contents }로 시각만 변경, 시맨틱 보존.

페이지네이션·정렬·필터링 — 대용량 데이터 표에서 클라이언트 측 페이지네이션tbody의 행을 동적 교체. TanStack Table 같은 라이브러리가 시맨틱 tbody 유지하면서 행만 교체.

긴 표의 반응형 패턴 — 모바일에서 행 단위로 카드로 변환. CSS로 td { display: block } 또는 data-label 속성 활용. 시맨틱은 tbody·tr·td 보존.