HTML <tbody> Tag

The <tbody> tag in HTML is used to group the body content within a table. It's a semantic element that helps structure tables logically, separating the main data rows from the header (<thead>) and footer (<tfoot>) rows. While not mandatory for basic tables, it enhances accessibility and allows for more complex styling and manipulation.

Syntax

<table>
  <tbody attributes>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    ...
  </tbody>
</table>

Attributes

Example

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

More Examples

Example with Multiple Rows

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$1200</td>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>$25</td>
        </tr>
        <tr>
            <td>Keyboard</td>
            <td>$75</td>
        </tr>
    </tbody>
</table>

This example demonstrates a table with three rows inside the <tbody> element representing different products and their prices.

Example with Styling

<table style="width:100%; border-collapse: collapse;">
    <thead>
        <tr style="background-color:#f2f2f2;">
            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Name</th>
            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">Country</th>
        </tr>
    </thead>
    <tbody style="background-color:#ffffff;">
        <tr style="border-bottom: 1px solid #ddd;">
            <td style="padding: 8px; border-right: 1px solid #ddd;">Alice</td>
            <td style="padding: 8px;">USA</td>
         </tr>
        <tr style="border-bottom: 1px solid #ddd;">
            <td style="padding: 8px; border-right: 1px solid #ddd;">Bob</td>
            <td style="padding: 8px;">Canada</td>
        </tr>
    </tbody>
</table>

Here, we apply CSS to demonstrate how styling can be targeted specifically to the table's body section through the <tbody> tag. Notice how only body rows are styled with background color white.

Example with colspan in rows

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
         <tr>
            <td colspan="2">Full Width Data</td>
        </tr>
    </tbody>
</table>

This example showcases a practical use of colspan within a row in the <tbody>, where one cell spans two columns.

Browser Support

The <tbody> tag is supported by all modern browsers.

Notes and Tips

• Using <tbody> is highly recommended for structured tables, especially when combined with <thead> and <tfoot>.
• The <tbody> tag is a container for <tr> (table row) elements that contain the main data.
• While older attributes like align, char, charoff and valign are valid, it's best to avoid them in modern HTML and use CSS for styling instead. This promotes separation of concerns and makes your HTML cleaner and more maintainable.
• Including <tbody> improves accessibility and makes it easier for assistive technologies like screen readers to understand the table structure.
• You can have multiple <tbody> elements within a single table, though it's less common. This can be useful for organizing very large tables with logical sections.
• When working with large tables, using <tbody> helps improve performance because browsers can render the table content incrementally.