HTML에서 테이블의 본문(body) 영역을 정의하려면 <tbody> 태그를 사용합니다. <tbody> 태그는 테이블에 본문 부분을 추가할 때 사용되며, <thead>(헤더) 태그와 <tfoot>(푸터) 태그와 함께 사용하여 테이블을 머리글, 바닥글, 본문으로 구조화할 수 있습니다.
<tbody> 태그의 주요 속성
<tbody> 태그에서 사용할 수 있는 속성은 다음과 같습니다. 아래 속성들은 모두 HTML5에서 더 이상 권장되지 않는(deprecated) 속성이므로, 실제 프로젝트에서는 CSS를 사용해 정렬을 처리하는 것이 좋습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| align | right left center justify char | 지원 중단됨 − 셀 내용의 시각적 수평 정렬을 지정합니다. |
| char | 문자(Character) | 지원 중단됨 − 텍스트를 정렬할 기준 문자를 지정합니다. align = "char"로 설정했을 때 사용됩니다. |
| charoff | 픽셀 또는 % | 지원 중단됨 − char 속성으로 지정한 기준 문자로부터의 정렬 오프셋(픽셀 또는 백분율)을 지정합니다. align = "char"와 함께 사용됩니다. |
| valign | top middle bottom baseline | 지원 중단됨 − 셀 내용의 수직 정렬을 지정합니다. |
사용 예제
다음 코드를 실행하면 HTML에서 테이블 본문(<tbody>)이 어떻게 표시되는지 확인할 수 있습니다. 이 예제에서는 <thead>, <tfoot>, 그리고 두 개의 <tbody> 블록을 함께 사용하여 테이블 구조를 명확하게 나누었습니다.
<!DOCTYPE html> <html> <head> <title>HTML tbody 태그</title> </head> <body> <table style = "width:100%" border = "1"> <thead> <tr> <td colspan = "4">테이블의 머리글(head)입니다</td> </tr> </thead> <tfoot> <tr> <td colspan = "4">테이블의 바닥글(foot)입니다</td> </tr> </tfoot> <tbody> <tr> <td>셀 1</td> <td>셀 2</td> <td>셀 3</td> <td>셀 4</td> </tr> <tr> ...네 개의 셀을 포함한 추가 행... </tr> </tbody> <tbody> <tr> <td>셀 1</td> <td>셀 2</td> <td>셀 3</td> <td>셀 4</td> </tr> <tr> ...네 개의 셀을 포함한 추가 행... </tr> </tbody> </table> </body> </html>
위 예제처럼 하나의 테이블 안에 여러 개의 <tbody> 블록을 포함할 수 있습니다. 이렇게 하면 데이터 행들을 논리적인 그룹으로 묶어 관리할 수 있어, 긴 테이블이나 반복되는 데이터 목록을 다룰 때 특히 유용합니다. 참고로 화면에는 <tfoot>이 코드상 <tbody>보다 앞에 있어도 항상 테이블 맨 아래에 표시됩니다.