search

Home >Web Front-end >HTML Tutorial >THead Tag in HTML

THead Tag in HTML

WBOY
WBOYOriginal
2024-09-04 16:30:211232browse

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:

<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>

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>

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>

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>

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 1st 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!

    css html define if for try Error char using Attribute default this position background column table tbody td tr everything
    Statement：
    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
    Previous article：HTML time TagNext article：HTML time Tag

    Related articles

    See more

    Public welfare online PHP training，Help PHP learners grow quickly！

    About usDisclaimerSitemap

    © php.cn All rights reserved

    elements, use the
    element. The