--- title: ': 표 본문 요소' slug: Web/HTML/Element/tbody tags: - Element - HTML - HTML tabular data - Reference - Web translation_of: Web/HTML/Element/tbody ---
{{HTMLRef}}

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

{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}

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

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

특성

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

사용 일람

예제

다음은 <tbody> 요소 사용법을 보이는 예제입니다. 더 많은 예제는 {{ HTMLElement("table", "", "#예제") }}에서도 볼 수 있습니다.

기본 예제

이번 예제는 {{HTMLElement("thead")}}와 {{HTMLElement("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;
}

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

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

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

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

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

결과

결과는 다음과 같습니다.

{{EmbedLiveSample("기본_예제", 650, 150)}}

다중 본문

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 {{HTMLElement("thead")}} per table! Because of that, you need to use a {{HTMLElement("tr")}} filled with {{HTMLElement("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:

{{EmbedLiveSample("다중_본문", 650, 250)}}

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 {{HTMLElement("th")}} element with a {{htmlattrxref("colspan", "th")}} 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 {{HTMLElement("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
{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}} {{Spec2('HTML5 W3C')}}

브라우저 호환성

{{Compat("html.elements.tbody")}}

같이 보기