THead Tag in HTML

The element or tag is used in hand with

tag and tag, defining the table header, table footer, and table body, respectively. The elements define the header of an HTML table. To define a row or set of rows that create the column heads of a table, we use the element. In other words, this element groups the header content in an HTML table. It encloses an entire row or rows and classifies it as Table Header. In this topic, we will learn about THead Tag in HTML.

A Table Header consists of a row or rows containing information about the columns or table body data.

How to use Element in HTML?

The element specifies the header part of the HTML Table. This thus secures a position as the immediate child of a table element,

. Before using any, , or element. The element may appear after any element if any, and element will contain at least one row of data enclosed in element.

Syntax

<thead>
<tr>
</tr>
</thead>

Of course, as shown above, just like any other HTML element,

element too works in pairs, opening tag, has a partner, a closing tag, .

Examples of THead Tag in HTML

Consider the following example:

Example #1

Code:

<title>HTML thead Tag</title>

elements, use the

This is the header section of the table
This is the footer section of the table
Data 1	Data 2	Data 3	Data 4
...more rows of data here...
...
...more rows of data here...
Data 1	Data 2	Data 3	Data 4

Output:

Note that if there is a need for two rows for the header of your table, both

element data can be added to one single element. Try not to add two element sections for one table. Observe one such example below, having two rows under the header section :

Example #2

Code:

Header 1 Row 1		Header 2 Row 1
Header 1 Row 2	Header 2 Row 2	Header 3 Row 2	Header 4 Row 2
Data 1	Data 2	Data 3	Data 4

Output:

Example #3

Code:

Header 1 Row 1		Header 2 Row 1
Header 1 Row 2	Header 2 Row 2	Header 3 Row 2	Header 4 Row 2
Data 1	Data 2	Data 3	Data 4

Output:

Observe that, though both the above codes generate the same output and using separate elements for two headers does get handled by some browsers. However, it is still a semantic error that should not be used in proper programming, and also it will be raised as a red flag by HTML validation services.

Example #4

Let’s see another example below. In the following example, we have created a table with a table body consisting of four rows of data. A header consists of one row of data set to a background color using CSS. The ,

or do not affect the default appearance of an HTML table; thus, a little help with CSS would suffice.

Code:

Time Table

Mon	Tue	Wed	Thu	Fri
Science	Maths	Hindi	Hindi	English
English	Hindi	Maths	Social	Science
Lunch
Science	English	Maths	Hindi	Social

Output: 

Attributes of THead Tag in HTML

The HTML element supports some following additional attributes.

• align: This attribute aligns the content of an element and everything inside it. It uses left, right, center, justify and char as its value.
• char: This attribute specifies alignment to the element content when align attribute is set to char.
• valign: It specifies the vertical alignment of the content inside the element. It uses top, middle, bottom, or baseline as its values.
• charoff: This attribute specifies an offset against the 1^st character as specified with a char attribute; that is, when to align is set to char.
• bgcolor: It helps set the background color of each cell inside element.

  Conclusion

  We saw how an element identifies column labels and not table data, holding the information about the headers and feeding it to the browsers, assisting technology with the content and its meaning.

The above is the detailed content of THead Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!