Open In App

How to group header content of a table using HTML5 ?

Last Updated : 05 Jun, 2020
Comments
Improve
Suggest changes
Like Article
Like
Report
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

Next Article
How to implement single row select and delete using DataTables plugin ?

M
manaschhabra2
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox