<tbody>: The Table Body element

This element includes the global 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.

align Deprecated

Specifies the horizontal alignment of each body cell. The possible enumerated values are left, center, right, justify, and char. When supported, the char value aligns the textual content on the character defined in the char attribute and on offset defined by the charoff attribute. Use the text-align CSS property instead, as this attribute is deprecated.

bgcolor Deprecated

Defines the background color of each body cell. The value is an HTML color; either a 6-digit hexadecimal RGB code, prefixed by a '#', or a color keyword. Other CSS <color> values are not supported. Use the background-color CSS property instead, as this attribute is deprecated.

char Deprecated

Specifies the alignment of the content to a character of each body cell. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.

charoff Deprecated

Specifies the number of characters to offset the body cell content from the alignment character specified by the char attribute.

valign Deprecated

Specifies the vertical alignment of each body cell. The possible enumerated values are baseline, bottom, middle, and top. Use the vertical-align CSS property instead, as this attribute is deprecated.

• The <tbody> is placed after any <caption>, <colgroup>, and <thead> elements.
• If <tr> elements are specified as direct children of the <table> (see "tag omission" in the technical summary for a description of when this is valid), then the markup generated by the browser will include a <tbody> element that encapsulates them. As a result, CSS selectors such as table > tr will not select these elements. See also the Not specifying a body example.
• It's permitted to use more than one <tbody> per table as long as they are all consecutive. This allows to divide the rows (<tr> elements) in large tables into sections, each of which may be separately formatted if so desired. If not marked up to be consecutive elements, browsers will correct this author error, ensuring any <thead> and <tfoot> elements are rendered as the first and last elements of the table, respectively.
• Along with its related <thead> and <tfoot> elements, the <tbody> element provides useful semantic information and can be used when rendering for either screen or print. Specifying such table content groups also provides valuable contextual information for assistive technologies, including screen readers and search engines.
• When printing a document, in the case of a multipage table, the <thead> and <tfoot> elements usually specify information that remains the same—or at least very similar—on each page, while the <tbody> element's contents generally will differ from page to page.
• When a table is presented in a screen context (such as a window) that is not large enough to display the entire table, the user agent may let the user scroll the contents of the <thead>, <tbody>, <tfoot>, and <caption> blocks separately from one another for the same parent <table>.

See <table> for a complete table example introducing common standards and best practices.

This example demonstrates that the browser automatically encapsulates <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 <table> element.

HTML

Here, a very basic table with some table rows (<tr> elements) containing data (<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 background-color is specified for the <tbody> element and the tbody is used as a part of an additional CSS selector. Alternatively, browser developer tools can be used to check the presence of the <tbody> element in the 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

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

HTML

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

The use of such table content groups and 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

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 <thead> element per table! Because of that, <tr> with <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 (<tr> element) serving as the head of the block, displaying the major title within a <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 <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

• Learn: HTML tables
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Other table-related elements
• background-color: CSS property to set the background color of each body cell
• border: CSS property to control borders of body cells
• text-align: CSS property to horizontally align each body cell content
• vertical-align: CSS property to vertically align each body cell content