THead Tag in HTML-HTML Tutorial-php.cn

Table of Contents

How to use <thead> Element in HTML?

Examples of THead Tag in HTML

Example #4

Attributes of THead Tag in HTML

Conclusion

Home

Web Front-end

HTML Tutorial

THead Tag in HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:30 PM

html html5 HTML Tutorial HTML Properties HTML tags

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>

Copy after login

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:

<html>
<head>
<title>HTML thead Tag</title>
</head>
<table style = "width:100%" border = "1">
<thead>
<tr>
<td colspan = "4" align="center">This is the <b>header</b> section of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" align="center">This is the <b>footer</b> section of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tbody>
<tbody>
<tr>
<td colspan="4">...</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<html>

Copy after login

Output:

THead Tag in HTML

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:

<table style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Copy after login

Output:

THead Tag in HTML

Example #3

Code:

<table  style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Copy after login

Output:

THead Tag in HTML

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:

<body>
<table border="3">
<caption>Time Table</caption>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>English</td>
<td>Hindi</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td colspan="10" align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>English</td>
<td>Maths</td>
<td>Hindi</td>
<td>Social</td>
</tr>
</tbody>
</table>
</body>

Copy after login

Output:

THead Tag in HTML

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn