How to group header content of a table using HTML5 ?

In this article, we define to group the header content in a table by using the <th> tag in HTML to set the header cell of a table. Two types of cells in an HTML table.

Header Cell: It is used to hold the header information.
Standard Cell: It is used to hold the body of data.

The working of both tags (<th> and <td>) are same but the text properties are different. In <th> tag, text is bold and centered, and in <td> tag, text is regular and left align by default. Syntax:

<th> Contents... </th>

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Group the header content 
        in a table using HTML
    </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 
            header content in a table?
        </h2>
        
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>User Id</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Shashank</td>
                    <td>@shashankla</td>
                </tr>
                <tr>
                    <td>GeeksforGeeks</td>
                    <td>@geeks</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>

</html>

Output:

Supported Browsers are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

How to group header content of a table using HTML5 ?

Explore