HTML: <thead> tag
This HTML tutorial explains how to use the HTML element called the <thead> tag with syntax and examples.
Description
The HTML <thead> tag defines a set of rows that make up the column headings in an HTML table. This tag is also commonly referred to as the <thead> element.
Syntax
In HTML, the syntax for the <thead> tag is: (example of a table with the columns headings - Item and Amount)
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$15</td>
</tr>
<tr>
<td>Peaches</td>
<td>$3</td>
</tr>
</tbody>
</table>
</body>
Sample Output
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <thead> tag:
Attribute | Description | HTML Compatibility |
---|---|---|
align | Horizontal alignment of text in each cell within the table heading. It can be one of the following values: left, center, right, justify, char | Deprecated in HTML 4.01, Obsolete in HTML5, use CSS |
bgcolor | Background color of each cell within the table heading | Deprecated in HTML 4.01, Obsolete in HTML5, use CSS |
char | Set the character to align the cells in a column | Deprecated in HTML 4.01, Obsolete in HTML5 |
charoff | Number of characters to offset column data from the alignment characters (in char attribute) | Deprecated in HTML 4.01, Obsolete in HTML5 |
valign | Vertical alignment of text of each cell within the table heading. It can be one of the following values: baseline, bottom, middle, top | Deprecated in HTML 4.01, Obsolete in HTML5, use CSS |
Note
- The HTML <thead> element is found in an HTML table within the <body> tag.
- Since the <thead> tag defines the column headings for a table, you will normally find the <th> tags found within a row in the <thead> tag.
- The <thead> tag must appear after the <caption> and <colgroup> tags in a table but before the <tbody> and <tfoot> tags.
- The <thead> tag can contain zero or more <tr> tags.
- In some browsers like Chrome, the contents of the <thead> are displayed at the top of each printed page when the table spans multiple printed pages.
Browser Compatibility
The <thead> tag is compatible with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <thead> tag below, exploring examples of how to use the <thead> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
Advertisements