HTML <thead> Tag
The <thead> tag in HTML is used to define the header content within an HTML table. It acts as a container for the table's header rows, usually containing <th> (table header) elements. Using <thead> improves table structure, accessibility, and makes it easier for browsers and assistive technologies to interpret the table's purpose. It should be used inside a <table> tag.
Syntax
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
...
</tr>
</thead>
...
</table>
Attributes
| Attribute | Value | Description |
|---|---|---|
align |
left, center, right, justify, char |
Specifies the alignment of the content within the <thead>. Deprecated in HTML5. Use CSS instead. |
char |
character | Specifies the alignment character for cells within the <thead>. Deprecated in HTML5. Use CSS instead. |
charoff |
number | Specifies the offset of the alignment character for cells within the <thead>. Deprecated in HTML5. Use CSS instead. |
valign |
top, middle, bottom, baseline |
Specifies the vertical alignment of the content within the <thead>. Deprecated in HTML5. Use CSS instead. |
Note: The align, char, charoff, and valign attributes are deprecated in HTML5 and should be replaced with CSS properties for styling.
Example
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</tbody>
</table>
More Examples
Example 1: Simple Table with <thead>
This example shows a basic table with a header row defined using the <thead> element.
<!DOCTYPE html>
<html>
<head>
<title>HTML thead Tag Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h2>Student Grades</h2>
<table>
<thead>
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>Alice</td>
<td>A</td>
</tr>
<tr>
<td>102</td>
<td>Bob</td>
<td>B</td>
</tr>
<tr>
<td>103</td>
<td>Charlie</td>
<td>C</td>
</tr>
</tbody>
</table>
</body>
</html>
Example 2: Using CSS for Styling instead of Deprecated Attributes
This example demonstrates how to use CSS for aligning the text inside the header instead of using the deprecated attributes. This will improve code clarity, maintainability and is the current standard practice.
<!DOCTYPE html>
<html>
<head>
<title>HTML thead Tag Example with CSS</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: center; /* Use CSS for alignment */
}
thead {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Product Catalog</h2>
<table>
<thead>
<tr>
<th>Product ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>P101</td>
<td>Laptop</td>
<td>$1200</td>
</tr>
<tr>
<td>P102</td>
<td>Tablet</td>
<td>$300</td>
</tr>
<tr>
<td>P103</td>
<td>Mouse</td>
<td>$25</td>
</tr>
</tbody>
</table>
</body>
</html>
Example 3: Table with Complex Header
A complex table might need multiple header rows for better clarity, which can be done using multiple <tr> elements inside the <thead> element.
<!DOCTYPE html>
<html>
<head>
<title>HTML thead Tag Example with Complex header</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
thead {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h2>Employee Details</h2>
<table>
<thead>
<tr>
<th rowspan="2">Employee ID</th>
<th colspan="2">Personal Information</th>
<th rowspan="2">Department</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>E101</td>
<td>John Doe</td>
<td>30</td>
<td>IT</td>
</tr>
<tr>
<td>E102</td>
<td>Jane Smith</td>
<td>25</td>
<td>HR</td>
</tr>
</tbody>
</table>
</body>
</html>
Browser Support
| Browser | Version |
|---|---|
| Chrome | All |
| Edge | All |
| Firefox | All |
| Safari | All |
| Opera | All |
The <thead> tag is supported by all major browsers.
Notes and Tips
- The
<thead>element must be placed as the first child of the<table>element, before the<tbody>and<tfoot>elements. - While deprecated attributes like
alignandvalignstill may work in some browsers, it's crucial to use CSS for styling instead, as using the deprecated attributes may lead to inconsistency in different browsers. - Always use
<th>elements inside the<thead>element for marking up header cells in table. - Using the
<thead>tag is beneficial for accessibility as screen readers can identify and pronounce the table headers correctly, providing a better user experience for people with disabilities. - Using
<thead>along with<tbody>and<tfoot>enhances the structure of your table and helps in keeping the style consistent.
