tbody element - by. UXKM

요약 설명

<tbody> 요소는 <table> 요소 내에서 표의 실제 본문 데이터 영역을 나타내는 시맨틱 태그로, 반복되는 데이터 행들을 포함합니다.
내부에는 하나 이상의 <tr>(행)을 포함하며, 각 행에는 <td>(일반 셀) 또는 <th>(행 제목 셀)를 사용할 수 있습니다. <thead>, <tfoot>과 함께 사용하여 표 구조를 논리적으로 구분하고, 정렬, 스타일 적용, 접근성 처리 등을 보다 명확하게 구성할 수 있게 도와줍니다.
<thead>나 <tfoot> 없이 <tbody>만 단독으로 사용할 경우, <tbody>를 생략해도 브라우저는 테이블 구조를 정상적으로 인식하고 표시합니다.

주요 역할 및 특징

  1. 테이블의 본문(데이터) 정의

    <thead>는 머리글, <tfoot>은 바닥글, <tbody>는 데이터가 포함된 본문을 정의합니다.

  2. 테이블 본문 데이터 그룹화
    • <tbody> 요소는 테이블의 본문 데이터를 구조적으로 그룹화하는 역할을 합니다.
    • 테이블이 헤더(<thead>)와 푸터(<tfoot>)를 포함할 경우, 본문 데이터는 반드시 <tbody>에 위치해야 합니다.
  3. 접근성 향상

    스크린 리더가 머리글과 데이터를 구별할 수 있도록 돕고, scope 속성과 함께 사용하면 표의 데이터를 쉽게 이해할 수 있습니다.

  4. 반복되는 테이블 구조에서 유용

    CSS 또는 JavaScript를 활용하여 <tbody> 내 데이터를 스크롤 가능하게 만들거나 동적으로 변경할 수 있습니다.

  5. <table> 내에서 생략 가능

    • <thead>나 <tfoot> 없이 <tbody>만 단독으로 사용할 경우, <tbody>를 생략해도 브라우저는 테이블 구조를 정상적으로 인식하고 표시합니다.
    • 하지만, 명시적으로 <tbody>를 사용하는 것이 가독성과 유지보수 측면에서 유리합니다.
  6. 페이지가 넘어가도 본문은 나뉘어 표시됨

    <thead>와 달리, <tbody>는 브라우저나 PDF 출력 시 자동으로 반복되지 않으며, 페이지가 넘어가도 본문 데이터는 계속 이어집니다.

  7. 반드시 <table> 내부에서 사용해야 함

    <tbody> 요소는 반드시 <table>내부에서 사용해야 하며, 단독으로 사용할 수 없습니다.

CSS 기본 값

<tbody> 요소는 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<tbody> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

<thead>와 <tbody>를 사용하여 테이블 구조화

colspan, rowspan을 활용한 테이블

주의사항

  • <tbody> 요소는 반드시 <table> 내부에서 사용해야 하며, 단독으로 사용할 수 없습니다.
  • <thead>가 있는 경우, 반드시 <tbody>가 그 다음에 위치해야 합니다.
  • <table> 내부에 <thead>, <tfoot> 없이 <tbody>만 존재하는 것은 가능하지만, 이렬 경우 <tbody>는 생략할 수 있습니다.