docs.rodeo

MDN Web Docs mirror

: The Table Body element

{{HTMLSidebar}} 

The <tbody> HTML element encapsulates a set of table rows ({{HTMLElement("tr")}}  elements), indicating that they comprise the body of a table’s (main) data.

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

Attributes

This element includes the global attributes.

Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

Usage notes

Examples

See {{HTMLElement("table")}}  for a complete table example introducing common standards and best practices.

Not specifying a body

This example demonstrates that the browser automatically encapsulates {{HTMLElement("tr")}}  elements within a <tbody> element if the rows are not nested within a table grouping element (<tbody>, <tfoot>, or <thead>) and are, as in this example, the direct children of the {{HTMLElement("table")}}  element.

HTML

Here, a very basic table with some table rows ({{HTMLElement("tr")}}  elements) containing data ({{HTMLElement("td")}}  elements) about students is created.

<table>
  <tr>
    <td>3741255</td>
    <td>Jones, Martha</td>
    <td>Computer Science</td>
    <td>240</td>
  </tr>
  <tr>
    <td>3971244</td>
    <td>Nim, Victor</td>
    <td>Russian Literature</td>
    <td>220</td>
  </tr>
  <tr>
    <td>4100332</td>
    <td>Petrov, Alexandra</td>
    <td>Astrophysics</td>
    <td>260</td>
  </tr>
</table>

CSS

Note the CSS in the example, where a {{cssxref("background-color")}}  is specified for the <tbody> element and the tbody is used as a part of an additional {{Glossary("css_selector", "CSS selector")}} . Alternatively, {{Glossary("developer_tools", "browser developer tools")}}  can be used to check the presence of the <tbody> element in the {{Glossary("dom", "DOM")}} .

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  width: 60px;
  text-align: center;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Result

{{EmbedLiveSample("Not_specifying_a_body", 650, 100)}} 

Basic body structure

This example extends and enhances the basic table from the previous example.

HTML

We introduce a table head ({{HTMLElement("thead")}}  element) and explicitly use a <tbody> element to structure the table into {{Glossary("semantics", "semantic")}}  sections. The table head contains the column headers ({{HTMLElement("th")}}  elements). The <tbody> element represents the body section of the table, which contains a number of rows ({{HTMLElement("tr")}}  elements) with the table’s main data, which is the data of each student.

The use of such table content groups and {{Glossary("semantics", "semantic")}}  markup is not only useful for visual presentation (via CSS styling) and contextual information for assistive technologies; moreover, the explicit use of the <tbody> element helps the browser to create the intended table structure, avoiding unwanted results.

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

CSS

The CSS is nearly unchanged from the previous example, except for some basic styling to highlight the table head so that the headers of the columns stand out from the data in the table body. As in the example above, the tbody type selector is used to style the body cells.

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: #fff;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Result

{{EmbedLiveSample("Basic_body_structure", 650, 140)}} 

Multiple bodies

This example extends and enhances the table from the example above even more by introducing multiple body sections.

Using multiple <tbody> elements allows creating row groupings within a table. Each table body can potentially have its own head row or rows; however, there may only be one {{HTMLElement("thead")}}  element per table! Because of that, {{HTMLElement("tr")}}  with {{HTMLElement("th")}}  elements can be used to create headers within each <tbody>.

HTML

Building on the table in the previous basic example, more students are added and, instead of listing each student’s major on each row, the students are grouped by major. Note that each major is enclosed within its own <tbody> block, with the first row ({{HTMLElement("tr")}}  element) serving as the head of the block, displaying the major title within a {{HTMLElement("th")}}  element that uses the colspan attribute to span the header across all three columns of the table. Each remaining row within each major’s <tbody> represents one student.

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

CSS

Most of the CSS is unchanged. However, a slightly more subtle style is added for header cells contained directly within a <tbody> (as opposed to those that reside in the {{HTMLElement("thead")}} ). This is used for the headers indicating each table section’s corresponding major.

tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

thead {
  background-color: #2c5e77;
  color: #fff;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 6px 8px;
  text-align: left;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Result

{{EmbedLiveSample("Multiple_bodies", 650, 300)}} 

Technical summary

Content categories None.
Permitted content Zero or more `{{ HTMLElement("tr") }}`  elements.
Tag omission A <tbody> element's start tag can be omitted if the first thing inside the <tbody> element is a `{{HTMLElement("tr")}}`  element, and if the element is not immediately preceded by a <tbody>, `{{HTMLElement("thead")}}` , or `{{HTMLElement("tfoot")}}`  element whose end tag has been omitted. (It can't be omitted if the element is empty.) A <tbody> element's end tag can be omitted if the <tbody> element is immediately followed by a <tbody> or `{{HTMLElement("tfoot")}}`  element, or if there is no more content in the parent element.
Permitted parents Within the required parent `{{ HTMLElement("table") }}`  element, the <tbody> element can be added after any `{{ HTMLElement("caption") }}` , `{{HTMLElement("colgroup") }}` , and `{{ HTMLElement("thead") }}`  elements.
Implicit ARIA role rowgroup
Permitted ARIA roles Any
DOM interface `{{domxref("HTMLTableSectionElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN