<tbody>

Groups the body content in a table

Definition and Usage

The <tbody> tag is used to group the body content in an HTML table.

The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

Note: The <tbody> element must have one or more <tr> tags inside.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <tbody> tag supports the Global Attributes in HTML.

The <tbody> tag also supports the Event Attributes in HTML.

Deprecated Attributes

The following attributes are deprecated in HTML5. Use CSS instead:

Attribute	Description	CSS Alternative
align	Aligns the content in the tbody element	Use CSS `text-align`
char	Aligns the content to a character	Not supported in CSS3
charoff	Sets the number of characters the content will be aligned from the character specified by the char attribute	Not supported in CSS3
valign	Vertical aligns the content in the tbody element	Use CSS `vertical-align`

Examples

Basic Table with tbody

Create a table with explicit tbody grouping:

Example
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane@example.com</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

Multiple tbody Sections

Group related rows using multiple tbody elements:

Example
<table>
  <thead>
    <tr>
      <th>Department</th>
      <th>Employee</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Engineering</td>
      <td>Alice Johnson</td>
      <td>Senior Developer</td>
    </tr>
    <tr>
      <td>Engineering</td>
      <td>Bob Williams</td>
      <td>Junior Developer</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Marketing</td>
      <td>Carol Brown</td>
      <td>Marketing Manager</td>
    </tr>
    <tr>
      <td>Marketing</td>
      <td>David Lee</td>
      <td>Content Writer</td>
    </tr>
  </tbody>
</table>

Table with thead, tbody, and tfoot

Complete table structure with all semantic sections:

Example
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>2</td>
      <td>$2,000</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>5</td>
      <td>$125</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td>3</td>
      <td>$225</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <th>10</th>
      <th>$2,350</th>
    </tr>
  </tfoot>
</table>

Scrollable tbody with Fixed Header

Create a table with scrollable body and fixed header:

Example
<style>
  .table-wrapper {
    max-height: 300px;
    overflow-y: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    position: sticky;
    top: 0;
    background-color: #745af2;
    color: white;
    z-index: 10;
  }

  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  tbody tr:hover {
    background-color: #f5f5f5;
  }
</style>

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Item One</td>
        <td>Active</td>
      </tr>
      <!-- More rows... -->
    </tbody>
  </table>
</div>

Styled tbody with Alternating Rows

Add zebra striping to table rows:

Example

Approved-page light CSS-variable defaults are supplied: --text-primary, --bg-primary. The snippet includes CSS inside its HTML.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    background-color: var(--text-primary);
    color: white;
  }

  th, td {
    padding: 12px;
    text-align: left;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tbody tr:nth-child(odd) {
    background-color: var(--bg-primary);
  }

  tbody tr:hover {
    background-color: #e0e0e0;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Bob Johnson</td>
      <td>35</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

tbody with JavaScript Manipulation

Dynamically add rows to tbody using JavaScript:

Example
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

<button onclick="addRow()">Add Row</button>

<script>
  function addRow() {
    const tbody = document.getElementById('tableBody');
    const row = tbody.insertRow();
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);

    cell1.textContent = 'New Name';
    cell2.textContent = 'new@example.com';
  }
</script>

Try it Yourself

Interactive Example

Here's a live example of a table with styled tbody:

Employee	Department	Salary
Alice Johnson	Engineering	$95,000
Bob Williams	Marketing	$75,000
Carol Davis	Sales	$82,000

Try in Code Playground

Table Grouping Elements

HTML provides three elements for grouping table content:

<thead> - Groups the header content in a table
<tbody> - Groups the body content in a table
<tfoot> - Groups the footer content in a table

Note: You can have multiple <tbody> elements in a table to group related rows together, but you can only have one <thead> and one <tfoot>.

JavaScript Table Manipulation

The <tbody> element makes it easier to manipulate table data with JavaScript:

Add rows: tbody.insertRow()
Remove rows: tbody.deleteRow(index)
Access rows: tbody.rows
Sort table data by targeting tbody
Filter and search specific to body content

Accessibility Benefits

Using <tbody> improves table accessibility:

Screen readers can identify and announce table sections
Users can navigate between table sections more easily
Clear semantic structure helps assistive technologies
Better table navigation for keyboard users
Improves table comprehension for all users

Best Practices

Always use <tbody> in conjunction with <thead> for better structure
Use multiple <tbody> elements to group related rows
Style tbody with CSS for zebra striping or hover effects
Use tbody for JavaScript manipulation of table data
Include <tfoot> when you have summary or total rows
Don't mix tbody and non-grouped rows in the same table
Use semantic grouping to improve accessibility

Default CSS Settings

Most browsers will display the <tbody> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Related Tags

<table>
Defines a table
<thead>
Groups header content in a table
<tfoot>
Groups footer content in a table
<tr>
Defines a row in a table
<td>
Defines a data cell in a table
<th>
Defines a header cell in a table