HTML <tbody> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <tbody> element in HTML is used to group the body content of a table. A table in HTML is typically structured into three main sections: the header (<thead>), the body (<tbody>), and the footer (<tfoot>). While the <thead> generally contains column headers and <tfoot> contains summary or total rows, <tbody> contains the main data rows of the table.

Using <tbody> helps organize the table content semantically, making it easier to read, style, and manipulate with CSS or JavaScript. For example, it allows developers to apply specific styling or scripting to the main data rows without affecting the header or footer.

When <tbody> is not explicitly defined, most browsers automatically create an implicit <tbody> around the table rows that are not inside <thead> or <tfoot>. However, explicitly using <tbody> is considered good practice because it makes the table structure more predictable and accessible.

In addition to semantic organization, <tbody> can also be useful for dynamic tables, where rows are added, removed, or updated via JavaScript. By targeting the <tbody> specifically, developers can efficiently manipulate only the data rows without affecting the header or footer.

Properties

Permitted Parents: Within the required parent <table> element, the <tbody> element can be added after a <caption>, <colgroup>, and a <thead> element
Content: <tr>
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<table border = "1">

  <thead>

    <tr><td colspan="2">Table Header (thead)</td></tr>

  </thead>

  <tfoot>

    <tr><td colspan="2">Table Footer (tfoot)</td></tr>

  </tfoot>

  <tbody>

    <tr>

      <td>Cell 1</td>

      <td>Cell 2</td>

    </tr>

    <tr>

      <td>Cell 3</td>

      <td>Cell 4</td>

    </tr>

    <tr>

      <td>Cell 5</td>

      <td>Cell 6</td>

    </tr>

  </tbody>

</table>

Result

Editor

Attributes

None

Global Attributes

The <tbody> tag also supports the Global Attributes in HTML5

Event Attributes

The <tbody> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <tbody> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.