Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Differentiate between <th> & <thead> tags in HTML Table
Before we learn about the difference, it is important to understand that both the <th> and <thead> tags are utilized to provide headers in HTML tables. However, the <th> tag is used to provide a header in a table cell, whereas the <thead> tag is used to provide a header for a table group.
Both tags are not replaced with one another, and the outputs will remain unchanged, Because the distinction can only be understood by developers or browsers.
Let's dive into the article to get a better understanding of the difference between <th> and <thead> tags in HTML tables.
HTML <th> tag
In HTML, a table essentially consists of two components − header cells and data cells. The HTML <th> tag specifies the heading for a table cell. To make it simple for everyone and locate the header of a column, the header of each cell in a table is always bold and centered by default; and every <td> tag representing a data cell has a direct connection to it.
Syntax
Following is the syntax for HTML <th> tag
<tr> <th>…</th> <th>…</th> </tr>
Example
Following is the example, where we're going to use the HTML <th> tag.
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 2px solid #A569BD;
}
</style>
<body style="background-color:#D5F5E3 ">
<table>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
<tr>
<td>RS7</td>
<td>$1000</td>
</tr>
<tr>
<td>Bugati</td>
<td>$8000</td>
</tr>
</table>
</body>
</html>
When the above code gets executed, it will generate an output consisting of the table along with an applied CSS that is displayed on the webpage.
HTML <thead> tag
The <thead> tag aids the browser or search engine in identifying the location of the table's header within the table's body. <tbody> and <tfoot> are supported by this tag. There must be one <tr> tag inside of <thead> in order to use this tag in the tables. This element also works well when a larger table that has multiple pages needs to be printed since it makes it possible for the table's header and footer to be printed at the top and bottom of the page.
Syntax
Following is the syntax for HTML <thead> tag
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
Example
In the following example we are going to use the HTML <thead> tag.
<!DOCTYPE html>
<html>
<style>
thead {
color: #6C3483;
}
tbody {
color: #DE3163;
}
tfoot {
color: #145A32;
}
table,
th,
td {
border: 2px solid #DFFF00;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Bike</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vespa</td>
<td>1000</td>
</tr>
<tr>
<td>Enfield</td>
<td>1100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2100</td>
</tr>
</tfoot>
</table>
</body>
</html>
On running the above code, the output window will pop up, displaying the table with the applied CSS on the webpage.
Difference between <th> and <thead> tags
Let's look into some of the difference between <th> and <thead> tag
<th> tag |
<thead> tag |
|---|---|
It belongs to the inline-block element family. |
It is a particular type of block-level element. |
It gives users the ability to distinguish between header and data cells. |
It enables the user to support separate table head and foot scrolling. |
It specifies the cell's header. |
It describes a group table's heading. |
Users can see the header because it is bold. |
The users cannot see the header. |
It's a header for a column. |
It's a heading for a table. |
The table itself contains the output. |
Users cannot see the output; it is only functional for browsers. |
It has an impact on the table's design. |
It has no impact on the design. |
The vertical headers at the start or end of each row are specified. |
It specifies the full-width horizontal header. |
392 Views
