<tbody> 태그의 정의 및 사용법

<tbody> 태그는
테이블의 데이터 본문(table body)에 해당하는 행(<tr> 태그)들의 그룹을 나타냅니다.

이 태그는 테이블에서 구조적 구분과 의미를 명확히 하기 위해 데이터를 포함하는 행들로 구성된 테이블의 본문임을 정의할 때 사용됩니다.

<tbody> 태그의 유용성

<tbody> 태그를 <thead>(테이블 헤더)와 <tfoot>(테이블 푸터) 태그과 함께 사용하면,
HTML의 의미론적 측면에서 테이블의 헤더(머리글), 본문, 푸터(바닥글)를 구분하여 더 나은 테이블 구조를 파악하고, 접근성 도구(예: 스크린 리더)나 검색 엔진 등 다양한 보조 기술에서 정보로 활용하는데 도움이 됩니다.

주요 마크업 규칙

  • <tbody> 태그의 부모는 <table> 태그이어야 합니다.
  • <tbody> 태그의 자식은 0개 이상의 <tr> 태그이어야 합니다.
  • 테이블당 <tbody> 태그는 여러 개가 있을 수 있습니다.

전체적인 마크업 규칙은 기술적인 문법 요약을 참고하세요.

데모

HTML 
<table>
    <caption>영수증</caption> <!-- 테이블 제목 -->
    <thead> <!-- 테이블 헤더(머리글) -->
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody> <!-- 테이블 본문(주요 데이터) -->
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
        <tr>
            <td>과자</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <tfoot> <!-- 테이블 푸터(바닥글) -->
        <tr>
            <th scope="row">합계</th>
            <td>4,000</td>
        </tr>
    </tfoot>
</table>
실제 적용된 모습 CSS를 사용해서 테이블의 구성 요소의 주변에 선과 배경색을 만들어 구조를 더 명확하게 파악할 수 있도록 스타일을 추가했습니다.
CSS 
th, td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
thead, tfoot {
    background-color: black;
    color: white;
}
tbody {
    background-color: gold;
}

속성

<tbody> 태그는 모든 전역 속성만을 사용할 수 있습니다.

더 이상 사용되지 않는 속성

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다.
구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

  • align
  • bgcolor
  • char
  • charoff
  • valign
thead 태그의 구문 형식
허용되는 부모 요소 <table>의 자식으로서, <caption>, <colgroup>, <thead> 뒤에 위치해야 하지만 <table>의 자식인 <tr>이 없는 경우에만 해당합니다.
허용되는 콘텐츠 없거나, <tr> 또는
(스크립트를 지원하는 <script> 및 <template>도 허용됩니다.)
암시적인 role 속성 값 rowgroup
허용된 role 속성 값 모두(Any)

간단한 구조의 테이블에서 <tbody> 태그는 한 개를 사용하는 경우가 많지만, 좀 더 복잡한 구조의 테이블에서는 테이블의 데이터 본문 구조를 구분하기 위해서 두 개 이상의 <tbody> 태그를 사용할 수 있습니다.

이때 마크업 규칙이 있는데, 테이블당 두 개 이상의 <tbody> 태그를 사용할 때에는 <tbody>와 <tbody>가 연속적으로 위치해야 합니다.

이렇게 여러 개의 <tbody> 태그를 사용하면 테이블의 데이터 본문을 섹션으로 나눌 수 있기 때문에 데이터 본문의 구조를 파악하는데 좀 더 수월할 수 있습니다.

알아두세요!
테이블당 <thead>(테이블 헤더)는 없거나 하나만 있어야 합니다. (테이블의 구조적 명확성을 위해)

예제

이전 '데모'에사 사용한 테이블을 바탕으로 더 많은 '상품'을 추가하고 '상품'을 '상품카테고리' 별로 그룹화하여 섹션으로 나누겠습니다.

섹션으로 사용되는 <tbody> 태그의 첫 번째 행(<tr> 태그)은 해당 섹션의 헤더 역할을 하며, 헤더 셀인 <th> 태그 내에 '상품 카테고리'를 표시하고, colspan 속성을 사용해서 테이블의 두 열(가로 방향, table column)에 걸쳐 셀을 확장합니다.

HTML 
<table>
    <caption>영수증</caption>
    <thead>
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody> <!-- 테이블의 데이터 본문을 섹션으로 나눔 -->
        <tr> <!-- 상품 카테고리 -->
            <th colspan="2" scope="colgroup">음료</th>
        </tr>
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
    </tbody>
    <tbody> <!-- 테이블의 데이터 본문을 섹션으로 나눔 -->
        <tr> <!-- 상품 카테고리 -->
            <th colspan="2" scope="colgroup">생활용품</th>
        </tr>
        <tr>
            <td>휴지</td>
            <td>5,000</td>
        </tr>
        <tr>
            <td>비누</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <tbody> <!-- 테이블의 데이터 본문을 섹션으로 나눔 -->
        <tr> <!-- 상품 카테고리 -->
            <th colspan="2" scope="colgroup">고기류</th>
        </tr>
        <tr>
            <td>생선</td>
            <td>10,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">합계</th>
            <td>19,000</td>
        </tr>
    </tfoot>
</table>
실제 적용된 모습 CSS를 사용해서 테이블의 구성 요소의 주변에 선과 배경색을 만들어 구조를 더 명확하게 파악할 수 있도록 스타일을 추가했습니다.
CSS 
th, td {
    padding: 0.5em 2em;
    border: 1px solid gray;
}
th {
    text-align: left;
}
thead, tfoot {
    background-color: black;
    color: white;
}
tbody {
    background-color: beige;
}
tbody th {
    background-color: gold;
    font-weight: normal;
}

<tbody>를 사용하지(마크업하지) 않았을 때

테이블 내에서 <tbody> 태그를 사용하지(마크업하지) 않았을 때 <tr> 태그가 <table> 태그의 직계 자식으로 배치되어 있으면, 브라우저가 테이블 구조의 전체적 맥락에 맞게 <tbody> 태그를 마크업에 추가합니다. (브라우저가 자동으로 마크업을 추가하는 것을 '암시적으로 추가'한다라고 말합니다.)

다음은 <tr> 태그가 <table>의 직계 자식으로 배치되어 있는 코드 예제입니다.

HTML 
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

이럴 경우 다음의 코드 예제와 같이 브라우저는 이 <tr> 태그의 부모로 <tbody> 태그를 암시적으로 마크업에 추가합니다.

HTML 브라우저가 암시적으로 <tbody> 태그를 추가합니다. 
<table>
    <tbody> <!-- 브라우저가 추가한 <tbody> 태그 -->
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

table > tr과 같은 CSS 자식 선택자가 예상대로 작동하지 않거나 전혀 작동하지 않을 수 있습니다.

CSS 
table > tr {
    /* your style */
}

브라우저 호환성

tbody 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<tbody> 1 12 1 1

명세서

tbody 태그의 명세서 사양
명세서 사양
<tbody> HTML Standard
#the-tbody-element

참고문헌

같이 보기