<tbody>: 표 본문 요소

HTML <tbody> 요소는 표의 여러 행(<tr>)을 묶어서 표 본문을 구성합니다.

<tbody> 요소와 그 사촌인 <thead>, <tfoot> (en-US) 요소는 화면과 프린터에 렌더링 할 때 뿐만 아니라 접근성 차원에서도 유용한 의미를 표의 행에 부여합니다.

콘텐츠 카테고리 없음.
가능한 콘텐츠 0개 이상의 <tr> 요소.
태그 생략 <tbody> 요소는 부모 <table> 요소의 렌더링에 반드시 필요한 요소는 아닙니다. 그러나 <table> 요소의 자식 중 <tr> 요소가 존재하면 사용할 수 없습니다.
가능한 부모 요소 <table> 요소. <caption>, <colgroup>, <thead> 요소가 존재하는 경우, 그 뒤에 위치할 수 있습니다.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLTableSectionElement (en-US)

특성

이 요소는 전역 특성만 포함합니다.

사용 일람

  • 표의 헤더 행을 나타내기 위해 <thead> 요소를 사용한 경우, <tbody> 요소는 반드시 그 뒤에 위치해야 합니다.
  • <tbody>를 사용할 경우, <table>의 바로 밑 자식이면서 <tbody>에 속하지 않는 <tr> 요소는 사용할 수 없습니다. 모든 비 헤더, 비 푸터 행은 반드시 <tbody>의 자식으로 존재해야 합니다.
  • 문서 출력 시, <thead><tfoor> 요소는 모든 페이지에서 같거나 거의 같은 정보를 나타내고, <tbody> 요소는 서로 다른 정보를 나타냅니다.
  • 표를 화면 맥락(브라우저 창 등)에서 표시할 때, 화면이 표 전체를 보여주기에 충분히 크지 않은 경우 사용자 에이전트는 같은 부모의 <thead>, <tbody>, <tfoot>, <caption> 요소를 서로 따로 스크롤 가능토록 설정할 수 있습니다.
  • 하나의 표에 다수의 <tbody>를 연속적으로 사용할 수 있으며, 이를 통해 커다란 표의 행을 구획으로 나눌 수 있습니다. 필요한 경우 각 구획에 서로 다른 서식을 적용할 수도 있습니다.

예제

다음은 <tbody> 요소 사용법을 보이는 예제입니다. 더 많은 예제는 <table>에서도 볼 수 있습니다.

기본 예제

이번 예제는 <thead><tbody>를 사용해 학생 그룹의 정보를 나열하는 표를 생성합니다.

HTML

표의 HTML은 다음과 같습니다. 학생의 정보를 나타내는 표 본문 칸이 모두 하나의 <tbody> 요소에 속함에 주의하세요.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
    </tr>
  </tbody>
</table>

CSS

다음은 표에 적용할 CSS 스타일입니다.

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
}

우선 표의 전반적인 스타일을 설정합니다.외부 테두리의 굵기, 스타일, 색을 설정하고, border-collapse를 이용해 각 칸의 테두리가 서로 분리되지 않고 공유하도록 지정합니다. font를 사용해 표의 기본 글씨체도 설정합니다.

th, td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

그 다음은 대부분의 칸에 적용할 스타일입니다. 1픽셀 두께의 밝은 회색 테두리를 추가하고 안쪽 여백을 조정하며, text-align을 사용해 모두 좌측 정렬로 설정합니다.

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}

마지막으로 <thead> 안에 위치하는 헤더 칸에 추가 스타일을 부여합니다. 보다 어두운 background-color, 더 큰 글씨 크기, 그리고 다른 테두리보다 두껍고 어두운 아래쪽 테두리를 적용합니다.

결과

결과는 다음과 같습니다.

다중 본문

You can create multiple sections within a table by using multiple <tbody> elements. Each may potentially have its own header row or rows; however, there can be only one <thead> per table! Because of that, you need to use a <tr> filled with <th> elements to create headers within each <tbody>. Let's see how that's done.

Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.

Result

First, the resulting table, so you know what we're building:

HTML

The revised HTML looks like this:

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
    </tr>
  </tbody>
</table>

Notice that each major is placed in a separate <tbody> block, the first row of which contains a single <th> element with a colspan attribute that spans the entire width of the table. That heading lists the name of the major contained within the <tbody>.

Then each remaining row in each major's <tbody> consists of two cells: the first for the student's ID and the second for their name.

CSS

Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a <tbody> (as opposed to those which reside in a <thead>). This is used for the headers indicating each table section's corresponding major.

tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}

명세

Specification Status Comment
HTML Living Standard
The definition of 'tbody element' in that specification.
Living Standard
HTML5
The definition of 'tbody element' in that specification.
Recommendation

브라우저 호환성

BCD tables only load in the browser

같이 보기

  • CSS properties and pseudo-classes that may be specially useful to style the <tbody> element:
    • the :nth-child pseudo-class to set the alignment on the cells of the column;
    • the text-align property to align all cells content on the same character, like '.'.