Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <thead> tag in HTML is used to group the header content of a table. It helps in structuring tables by separating the header section from the body (<tbody>) and footer (<tfoot>). This tag is useful for improving table readability and accessibility.
In this article, you will learn about the <thead> tag, its syntax, attributes, and how to use it effectively in HTML tables.
Definition and Usage
The `<thead>` tag in HTML is used to define the header section of a table. It groups the header content (like column titles) in a table, making it easier to style & manage. The `<thead>` tag is always placed inside a `<table>` element & works alongside `<tbody>` (table body) & `<tfoot>` (table footer) to structure the table properly.
When you use the `<thead>` tag, browsers & screen readers can better understand the table’s structure, which improves accessibility. It also helps in applying styles or scripts to the header section separately from the rest of the table.
2. Inside the table, the `<thead>` tag is used to define the header section. It contains a `<tr>` (table row) with `<th>` (table header) elements for column titles.
3. The `<tbody>` tag follows, which contains the actual data rows using `<td>` (table data) elements.
4. The `<style>` section adds basic styling to make the table visually appealing.
This example shows how the `<thead>` tag organizes the table header, making it clear & easy to read.
Syntax
The <thead> tag is used within the <table> element. Inside <thead>, the <tr> (table row) tag is used to define rows, and <th> (table header) tags are used for header cells.
A table with a gray-colored header containing "Name," "Age," and "City," followed by rows with data.
Attributes
The `<thead>` tag itself doesn’t have many unique attributes, but it supports global attributes that are common to most HTML elements. These attributes help in styling, accessibility, & functionality. Let’s look at some of the important ones:
1. `align` (Deprecated in HTML5):
This attribute was used to align the content inside the `<thead>` horizontally. However, it’s no longer recommended in HTML5. Instead, use CSS for alignment.
2. `valign` (Deprecated in HTML5):
This attribute was used to align the content vertically within the `<thead>`. Like `align`, it’s deprecated & CSS should be used instead.
3. `class`:
The `class` attribute is used to assign one or more class names to the `<thead>` element. This allows you to apply CSS styles or JavaScript functions specifically to the header section.
4. `id`:
The `id` attribute gives a unique identifier to the `<thead>` element. This is useful for targeting the element with CSS or JavaScript.
5. `style`:
The `style` attribute allows you to apply inline CSS directly to the `<thead>` element.
6. `colspan` and `rowspan` (for `<th>` inside `<thead>`):
These attributes are used within the `<th>` elements inside the `<thead>` to merge cells horizontally (`colspan`) or vertically (`rowspan`).
1. The `class` attribute is used to apply the `.custom-header` class, which changes the font size & color of the header.
2. The `id` attribute assigns a unique identifier (`table-header`) to the `<thead>` element.
3. The `style` attribute adds inline CSS to make the header text bold.
4. The `colspan="2"` attribute in the first `<th>` merges two columns for the "Employee Details" header.
5. The `rowspan="2"` attribute in the third `<th>` merges two rows for the "City" header.
Supported Browsers
The <thead> tag is supported by all modern web browsers. Below is a table showing browser compatibility:
Browser
Support
Chrome
Yes
Firefox
Yes
Edge
Yes
Safari
Yes
Opera
Yes
IE
Yes
Frequently Asked Questions
What is the purpose of the <thead> tag in HTML?
The <thead> tag is used to define the header section of an HTML table, separating it from the body (<tbody>) and footer (<tfoot>). It improves readability and styling.
Can we use <thead> without <tbody> in an HTML table?
Yes, a table can have only <thead>, but using <tbody> ensures better structure and accessibility.
How can we style the <thead> tag using CSS?
You can style <thead> using CSS by selecting it directly or by using class or id selectors.
Conclusion
In this article, we explored the <thead> tag in HTML, which is used within the <table> element to group the header content of a table. It helps in structuring table data, improving readability, and making styling easier with CSS. Understanding the <thead> tag enhances table organization and accessibility in web development.
518+ registered 
