<thead> Tag in HTML

Introduction

Let's understand the concept of <thead> tag:

As we know that a table consists of some columns having different fields and in each field we have some rows storing the data, but the table looks more informative when the heading is assigned to the columns. This task is done by the thead tag in HTML. The <thead> tag is used to group the header content in an HTML table. It is used under the <table> tag (used to create the table) in HTML.

While creating HTML tables , we first define the heading of the table then the body of the table and then the footer of the table. These tasks are performed by <thead> tag, <tbody> tag, and the <tfoot> tag respectively and are used in this order only.

Thus, we can say that the <thead> tag is used in conjunction with the <tbody> and <tfoot> tags to specify each part of a table i.e the header, body, and the footer. And all of them are enclosed within the <table> ... </table> tags.

The HTML table consists of two kinds of cells, one is the header cell which stores the heading (heading is stored inside the <th> tag) and the other one is the data cell which stores the data (data is stored inside the <td> tag). Mainly the <th></th> tags are used inside the <thead> ... </thead> tags, because the header of the table consists of the headings. There should be at least one row in the HTML table and hence there should be atleast one <tr> tag in the <thead> element.

Here, </tr> tag stands for "The Table Row" element. It defines the row of cells in a table. The row's cells can then be created using a mix of <td> (if we want to store the data, it is called the data cell) and <th> (if we want to store the heading, it is known as the heading cell).

Syntax of thead Tag:

The <thead> tag is enclosed in paris. The content is written in between the opening tag represented by <thead>and a closing tag represented by </thead> tag.

Here, <tr> ... </tr> tags show the rows in a table and <th> ... </th> tags show the heading cell in the table.

Attributes of Thead Tag:

There are some tag specific attributes which are related to the <thead> tag:

Align : It determines the alignment of the content inside the <thead> element. The alignment can be left, right, center or justify.

Char : It specifies the alignment of the content inside the <thead> element to the character.

Charoff : It specifies the number of characters inside the <thead> element that align the character specified by the char attribute. It is used only when the attribute is align="char".

Valign : It determines the vertical alignment of the text content inside the <thead> element. The alignment can be top, middle, bottom or the baseline.

The <thead> tag also supports the global and the event attributes in HTML.

Some of the global attributes are shown below:

Some of the event attributes are shown below:

Usage of <thead> Tag in HTML?

The <thead> tag is used to group the header content in an HTML table. The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, and footer).

As we know that a table can be divided into three different sections, namely header, body and footer, where header section stores the heading or the label of the columns, body section stores the table data in different columns, and footer section is used to group footer content in an HTML table. So, we can say that <thead>, <tbody> and <tfoot> tags are used together to define a table in HTML.

Examples of <thead> tag:

Let's say we want to create a student_details table storing the name and age of the students, like this:

We can write the syntax to create the table:

Output:

Student details table:

Here, the <thead> tag is used to show the header in the table, and inside that we have created one row using the <tr></tr> tags, and in a row, we have added a heading of the columns using the <th></th> tag.

Let's see another example in which we will include all the three section tags in a table and see the usage of <thead>, <tbody> and <tfoot> tags. We will create the same student details table in this example also, similar to the table shown in the diagram below:

Output:

Student details table:

Here, the sum of ages section is in the footer of the table.

We can also provide styling to the table, lets see the example of the same student_details table along with the CSS styling to obtain the table similar to the shown in the diagram below:

Output:

Student details table:

Here, the output will be the same table along with the CSS styling.

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

Let's see the example in which we will vertically align the contents inside the <thead> tag to understand the vertical-align property better:

Output:

Student details table:

Here, we have taken the same example of the student details table in which we have added the vertical alignment styling in the <thead> element.

Similar to this, we have the text-align property which sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

Let's see the example in which we will horizontally align the contents inside the <thead> tag to understand text-align property:

Output:

Student details table:

Here, we have taken the same example of the student details table in which we have added the horizontal text alignment styling in the <thead> element.

Browser Support:

The supported browsers for the the <thead> tag in HTML include Google Chrome, Edge, Safari, Firefox, Internet Explorer and Opera.

Conclusion:

• The <thead> tag is used to define the header of an HTML table.

• The <thead> tag is used along with <tbody> and <tfoot> tags which define the table body, and the table footer section in an HTML table.

• The HTML <thead> tag is written inside the HTML table within the <body> tag.

• The <thead> tag should contain at least one row element inside it represented by the <tr> tag.

• The <thead> tag must be a child of the <table> element.

• The <thead> tag must be used before <tbody>, or <tfoot> elements.

• The <thead> tag also supports Global and the Event attributes in HTML.

• <th> tag is used to give header in the cell of a table in HTML whereas the <thead> tag is used to give the header of a group of a table.

• The <thead> tag is used to add a header in a table while <tfoot> tag is used to add a footer in a table.

• Since the <thead> tag defines the column headings for a table, you will normally find the <th> tags within a row in the <thead> tag.

• Other table-related HTML Elements are: <table>, <tbody>, <td>, <tfoot>, <th>, and <tr>.