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.
The element specifies the header part of the HTML Table. This thus secures a position as the immediate child of a table element, Syntax Of course, as shown above, just like any other HTML element, element too works in pairs, opening tag, has a partner, a closing tag, .
Consider the following example: Code: Output: Note that if there is a need for two rows for the header of your table, both Code: Output: Code: 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.
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 , Code: Output: The HTML element supports some following additional attributes.
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!. Before using any,
, or or do not affect the default appearance of an HTML table; thus, a little help with CSS would suffice.
elements, use the element. The element may appear after any element.
<thead>
<tr>
</tr>
</thead>
Examples of THead Tag in HTML
Example #1
<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>
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
<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>
Example #3
<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>
Example #4
<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>
Attributes of THead Tag in HTML
Conclusion