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:
<!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
Please Login to comment...