HTML <tbody> Tag

The HTML <tbody> tag is used to group the body content of a table. It is placed within the <table> element and contains rows (<tr>) with table data (<td>) or header cells (<th>). The <tbody> tag helps in structuring and organizing the table into distinct sections, especially when combined with <thead> and <tfoot>.

Although the <tbody> tag is optional, it is useful for styling, scripting, and improving table semantics.

Basic Syntax of HTML <tbody> Tag

The basic structure of a table with the <tbody> tag is:

</>
Copy
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

The <tbody> tag wraps the rows containing the table’s main data.

Example of a Table Using the <tbody> Tag

Here’s a simple example of a table with <thead>, <tbody>, and <tfoot>:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Sales Data</h2>
        <table border="1">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Laptops</td>
                    <td>50</td>
                    <td>$500</td>
                </tr>
                <tr>
                    <td>Phones</td>
                    <td>100</td>
                    <td>$300</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2">Total</td>
                    <td>$80,000</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
Example of a Table Using the <tbody> Tag

Explanation: The <thead> contains table headers, the <tbody> contains the data rows, and the <tfoot> contains summary information.

Styling the <tbody> Tag with CSS

The <tbody> tag can be styled separately from other table sections to highlight the data rows:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: center;
            }
            thead th {
                font-weight: bold;
            }
            tbody tr:nth-child(odd) {
                background-color: #f9f9f9;
            }
            tbody tr:nth-child(even) {
                background-color: #dfdfdf;
            }
        </style>
    </head>
    <body>
        <h2>Styled Table with tbody</h2>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alice</td>
                    <td>30</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>25</td>
                    <td>Los Angeles</td>
                </tr>
                <tr>
                    <td>Charlie</td>
                    <td>24</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Distrob</td>
                    <td>27</td>
                    <td>Los Angeles</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Styling the <tbody> Tag with CSS

Result: The rows in the <tbody> section are styled with alternating background colors for better readability.

Practical Applications of the <tbody> Tag

  • Organizing Data: Use <tbody> to group rows in large tables, making them easier to manage and style.
  • Styling: Apply specific styles to the data rows while keeping headers and footers separate.
  • Scripting: Target the <tbody> element for dynamic table manipulation using JavaScript.
  • Accessibility: Improve table semantics by explicitly defining table sections.