<tbody>: 표 본문 요소

번역이 완료되지 않았습니다. Please help translate this article from English

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

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

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

특성

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

사용 일람

  • 표의 헤더 행을 나타내기 위해 <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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
tbodyChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
align
Deprecated
Chrome ? Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 915
IE Full support YesOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 915
Opera Android ? Safari iOS ? Samsung Internet Android ?
bgcolor
Deprecated
Chrome ? Edge ? Firefox No support NoIE Full support YesOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
char
Deprecated
Chrome ? Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 2212
IE Full support YesOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 2212
Opera Android ? Safari iOS ? Samsung Internet Android ?
charoff
Deprecated
Chrome ? Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 2212
IE Full support YesOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 2212
Opera Android ? Safari iOS ? Samsung Internet Android ?
valign
Deprecated
Chrome ? Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 915
IE Full support YesOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android No support No
Notes
No support No
Notes
Notes See bug 915
Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

같이 보기

  • 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 '.'.