How to group the body content in a table using HTML5 ?

Last Updated : 20 Mar, 2023

In this article, group the body content in an <table> element in a document. It is used to define a standard cell in an HTML table.

Syntax:

<tbody> ... </tbody>

Example 1: In this example, we use some HTML tags and make the group the body content in a table.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to group the body content 
        in a table using HTML5?
    </title>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        th {
            color: blue;
        }

        table,
        tbody,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h2>
            HTML5: How to group the body
            content in a table?
        </h2>
        
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>User Id</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Honeysingh</td>
                    <td>@Yo Yo Honey singh</td>
                </tr>
                <tr>
                    <td>GeeksforGeeks</td>
                    <td>@geeks</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>

</html>

Output:

Example 2: In this example how to group the body content in a table using HTML5, and apply some colorful styling to the webpage.

Syntax:

tbody > tr > td[colspan="3"] {
      background-color: #2196F3;
      color: white;
      text-align: center;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 20px;
        }

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

        th {
            background-color: #4CAF50;
            color: white;
        }

        td {
            background-color: #f2f2f2;
        }

        td:first-child {
            border-left: 1px solid #ddd;
        }

        td:last-child {
            border-right: 1px solid #ddd;
        }

        tbody>tr>td[colspan="3"] {
            background-color: #2196F3;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">GeeksforGeeks ! </h1>
    <table>
        <thead>
            <tr>
                <th>Group 1</th>
                <th>Group 2</th>
                <th>Group 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">
                      <strong>Section 1</strong>
                  </td>
            </tr>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
                <td>Row 1, Column 3</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
                <td>Row 2, Column 3</td>
            </tr>
            <tr>
                <td colspan="3">
                      <strong>Section 2</strong>
                  </td>
            </tr>
            <tr>
                <td>Row 3, Column 1</td>
                <td>Row 3, Column 2</td>
                <td>Row 3, Column 3</td>
            </tr>
            <tr>
                <td>Row 4, Column 1</td>
                <td>Row 4, Column 2</td>
                <td>Row 4, Column 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Description: The table has a basic structure with a thead element containing the column headers, and a tbody element containing the data rows. The first column of each row is grouped into sections using the colspan attribute on the td element. The th and td elements have some basic styling to provide padding, alignment, and border. The th elements have a background color of green and white text color, while the td elements have a background color of light gray.

Output: