HTML <tbody> 태그

정의와 사용법

<tbody> 태그는 HTML 테이블의 본문 내용을 그룹화하는 데 사용됩니다.

<tbody> 요소와 <thead> 와 <tfoot> 요소를 조합하여 테이블의 각 부분(본문, 헤더, 푸터)을 지정합니다.

브라우저는 이러한 요소를 사용하여 테이블 본문을 스크롤할 때 헤더와 푸터를 독립적으로 표시할 수 있습니다. 또한, 여러 페이지에 걸쳐 대형 테이블을 인쇄할 때, 이러한 요소는 테이블의 헤더와 푸터가 각 페이지의 상단과 하단에 인쇄되도록 합니다.

주의:<tbody> 요소 내부는 하나 이상의 <tr> 태그。

<tbody> 표시는 다음 상황에서 사용해야 합니다: <table> 요소의 자식 요소는 어떤 <caption>以及<colgroup> 와 <thead> 요소 이후.

추천:기본적으로, <thead>, <tbody>, 및 <tfoot> 요소는 테이블 레이아웃에 영향을 미치지 않습니다. 하지만, 이러한 요소의 스타일을 CSS로 설정할 수 있습니다!(아래 예제를 참조하세요)!

예제

예제 1

<thead>, <tbody>, 및 <tfoot> 요소를 포함한 HTML 테이블:

<table>
  <thead>
    
      <tr>
      <th>월</th>
    <td>￥4500</td>
  </thead>
  <tbody>
    
      <tbody style="vertical-align:bottom">
      <td>1월</td>
    <td>￥4500</td>
    
      <tr style="height:100px">
      <td>2월</td>
    <td>￥4500</td>
  </tr>
  <tfoot>
    
      <td>총액</td>
      <td>￥7900</td>
    <td>￥4500</td>
  </tfoot>
</tbody>

</table>

예제 2

CSS를 사용하여 <thead>, <tbody>, 및 <tfoot>의 스타일을 설정합니다:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    
      <tr>
      <th>월</th>
    <td>￥4500</td>
  </thead>
  <tbody>
    
      <tbody style="vertical-align:bottom">
      <td>1월</td>
    <td>￥4500</td>
    
      <tr style="height:100px">
      <td>2월</td>
    <td>￥4500</td>
  </tr>
  <tfoot>
    
      <td>총액</td>
      <td>￥7900</td>
    <td>￥4500</td>
  </tfoot>
</tbody>

</table>

예제 3

정렬하는 방법 <tbody> 의 내용( CSS를 사용하여):

<table style="width:100%">
  <thead>
    
      <tr>
      <th>월</th>
    <td>￥4500</td>
  </thead>
  <tbody style="text-align:right">
    
      <tbody style="vertical-align:bottom">
      <td>1월</td>
    <td>￥4500</td>
    
      <tr style="height:100px">
      <td>2월</td>
    <td>￥4500</td>
  </tr>
</tbody>

</table>

예제 4

가로 정렬하는 방법 <tbody> 의 내용( CSS를 사용하여):

<table style="width:50%;">
  
    <tr>
    <th>월</th>
  <td>￥4500</td>
  <th>저축</th>
    <td>￥3400</td>
      <tbody style="vertical-align:bottom">
      <td>1월</td>
    <td>￥4500</td>
    <td>￥3400</td>
      <tr style="height:100px">
      <td>2월</td>
    <td>￥4500</td>
  </tr>
</tbody>

</table>

직접 시험해 보세요

<tbody> 태그는 또한 이벤트 속성을 지원합니다 전역 속성。

HTML에서의 전역 속성

<tbody> 태그는 또한 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <tbody> 요소:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원