How To Use the thead tag in HTML5

The <thead> element is an HTML tag that is used to define the table header. This element is commonly used with other table elements, such as <tbody>, <tfoot>, and <tr>. The <thead> element is a container for a table’s header rows, which contain column labels or headers.

Code Example

Here’s an example of how to use the <thead> tag in HTML:

<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>

Attributes of the <thead> Element

The <thead> tag has several attributes that can be used to customize its appearance and behavior. Here is a bulleted list of all the applicable attributes, along with explanations of what they do:

• align: specifies the alignment of the content in the table header cell. The possible values are left, center, and right.
• char: specifies the character that separates text in the column headers. The default value is a space.
• charoff: specifies the offset of the character that separates text in the column headers. The default value is 0.
• scope: specifies the scope of the header cell. The possible values are row, col, rowgroup, and colgroup.
• abbr: provides an abbreviated version of the table header cell content.
• axis: specifies the axis of the header cell. This attribute is deprecated and should not be used.
• headers: specifies the relationship between the header and data cells in a table.

Conclusion

The <thead> element is an important HTML tag that is used to define the table header. It helps to organize the content of a table and make it more accessible to users who use screen readers or other assistive technologies. By using the appropriate attributes, you can customize the appearance and behavior of the <thead> element to suit your needs.