Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Differentiate between & tags in HTML Table
Before we learn about the differences, 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 define individual header cells within a table, whereas the <thead> tag is used to group the header rows of a table for semantic and structural purposes.
Both tags serve different purposes and are not replaceable with one another. The <th> tag provides visible styling and semantics for header cells, while <thead> provides logical structure that browsers and assistive technologies can understand.
HTML <th> Tag
The HTML <th> tag specifies a header cell in an HTML table. Header cells are used to describe the content of data cells in the same row or column. By default, header cells are displayed with bold text and center alignment to distinguish them from regular data cells.
Syntax
Following is the syntax for the HTML <th> tag
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
Example
Following example demonstrates the usage of the <th> tag
<!DOCTYPE html>
<html>
<head>
<title>HTML th Tag Example</title>
<style>
table, th, td {
border: 2px solid #A569BD;
border-collapse: collapse;
padding: 8px;
}
table {
margin: 20px auto;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; background-color: #D5F5E3;">
<table>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
<tr>
<td>Audi RS7</td>
<td>$100,000</td>
</tr>
<tr>
<td>Bugatti</td>
<td>$800,000</td>
</tr>
</table>
</body>
</html>
The output displays a table with bold, centered header cells
Car | Price Audi RS7 | $100,000 Bugatti | $800,000
HTML <thead> Tag
The <thead> tag is used to group header content in an HTML table. It helps browsers and assistive technologies identify which part of the table contains header information. The <thead> tag is typically used together with <tbody> and <tfoot> to provide semantic structure to tables.
The <thead> tag is especially useful for large tables that span multiple pages when printed, as it ensures header rows are repeated on each page.
Syntax
Following is the syntax for the HTML <thead> tag
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
Example
Following example demonstrates the usage of the <thead> tag along with <tbody> and <tfoot>
<!DOCTYPE html>
<html>
<head>
<title>HTML thead Tag Example</title>
<style>
table, th, td {
border: 2px solid #DFFF00;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
table {
margin: 20px auto;
}
thead {
color: #6C3483;
background-color: #F8F9F9;
}
tbody {
color: #DE3163;
}
tfoot {
color: #145A32;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<table>
<thead>
<tr>
<th>Bike</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vespa</td>
<td>$1,000</td>
</tr>
<tr>
<td>Royal Enfield</td>
<td>$1,100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$2,100</td>
</tr>
</tfoot>
</table>
</body>
</html>
The output displays a structured table with distinct styling for header, body, and footer sections
Bike | Price (purple text, gray background) Vespa | $1,000 (red text) Royal Enfield | $1,100 (red text) Total | $2,100 (green text, bold)
Using <th> and <thead> Together
In practice, <th> and <thead> are often used together. The <thead> provides semantic grouping while <th> defines the actual header cells with their visual styling.
Example
<!DOCTYPE html>
<html>
<head>
<title>Combined th and thead Example</title>
<style>
table {
border-collapse: collapse;
margin: 20px auto;
width: 60%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
thead th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<table>
<thead>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$999</td>
</tr>
<tr>
<td>Smartphone</td>
<td>Electronics</td>
<td>$699</td>
</tr>
</tbody>
</table>
</body>
</html>
This example shows how <thead> groups the header row while <th> elements define individual header cells with green background styling.
Key Differences Between <th> and <thead> Tags
Following table summarizes the key differences between <th> and <thead> tags
| <th> Tag | <thead> Tag |
|---|---|
| Defines individual header cells within a table | Groups header rows for semantic structure |
| Provides visual styling (bold, centered by default) | No default visual styling |
| Can be used anywhere within table rows | Can only be used once per table, before <tbody> |
| Content-level element containing text | Container element that must contain <tr> elements |
| Directly visible to users with styling | Provides semantic meaning for browsers/assistive tech |
| Supports attributes like colspan, rowspan, scope | Groups multiple header rows together |
| Can create row or column headers | Defines the entire header section of a table |
| Improves accessibility by identifying header cells | Improves table structure for printing and navigation |
Conclusion
The <th> tag defines individual header cells with visual styling, while <thead> provides semantic grouping for header rows. Both tags serve complementary purposes in creating well-structured, accessible HTML tables and are often used together for optimal table organization.
1K+ Views
