HTML <tbody> Tag

The HTML <tbody> tag is a fundamental part of table structure in web development. It is used to group the body content of a table, helping to distinguish the main data from the header (<thead>) and footer (<tfoot>) sections. By using the <tbody> tag, developers can make table content more organized, readable, and accessible, both for users and search engines.

The <tbody> tag does not change how the table is rendered by default but plays a critical role in defining the table's structure, especially when combined with other tags like <thead> and <tfoot>. 

Syntax of the <tbody> Tag

The syntax of the <tbody> tag is straightforward. It is placed within the <table> element and wraps around the rows of the table's body content:

html
<table>
    <thead>
        <!-- Table header content -->
    </thead>
    <tbody>
        <!-- Table body rows -->
    </tbody>
    <tfoot>
        <!-- Table footer content -->
    </tfoot>
</table>

The <tbody> tag contains one or more <tr> (table row) elements, which in turn include <td> (table data) elements that define the individual cells of the table.

Attributes of the <tbody> Tag

The <tbody> tag supports several global attributes that allow for styling and identification, which are common to all HTML elements.

AttributeDescription
classSpecifies a class name for the <tbody> element for CSS styling.
idAssigns a unique identifier to the <tbody> for reference in JavaScript or CSS.
styleAllows inline CSS styles to be applied directly to the <tbody> content.
langDefines the language of the table body’s content.
data-*Allows embedding custom data attributes for use in JavaScript applications.

These attributes provide flexibility, allowing developers to control the appearance and behavior of the table body.

Examples of HTML <tbody> Tag

Example 1: Simple Table with <tbody>

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Table Example</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Occupation</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>25</td>
                <td>Engineer</td>
            </tr>
            <tr>
                <td>Alice</td>
                <td>30</td>
                <td>Teacher</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this example, the <tbody> tag groups the rows of data in the table, making it easy to separate the body from the header.

Example 2: Table with <thead>, <tbody>, and <tfoot>

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Header, Body, and Footer</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Laptop</td>
                <td>$800</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Phone</td>
                <td>$500</td>
                <td>5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td>$1300</td>
                <td>7</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

This example illustrates how the <tbody> tag works alongside the <thead> and <tfoot> tags to organize a table into clear sections.

FAQs About HTML <tbody> Tag

Q1: What is the purpose of the HTML <tbody> tag?
A: The <tbody> tag is used to group the body content of a table, distinguishing it from the header (<thead>) and footer (<tfoot>), making the table more readable and structured.

Q2: Is the <tbody> tag mandatory in HTML tables?
A: No, the <tbody> tag is not mandatory, but it is highly recommended for tables with multiple sections (header, body, footer) to improve the structure and accessibility of the table.

Q3: Can a table have multiple <tbody> sections?
A: Yes, a table can contain multiple <tbody> elements to group different sections of the table body, especially when managing large datasets or grouping related rows.

Q4: Does the <tbody> tag affect the display of the table?
A: By default, the <tbody> tag does not alter the display of the table. However, it provides a structural advantage and can be styled with CSS.

Q5: How does the <tbody> tag improve accessibility?
A: The <tbody> tag improves accessibility by clearly defining the structure of the table, allowing screen readers and assistive technologies to better understand and navigate the content.

tools

HTML

Related Articles