Definition
The <thead>
HTML element is used to group the header content in a table. It is typically used to contain the table header rows (<tr>
) that define the column labels or titles.
Here’s an example of how to use the <thead>
element:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</tbody>
</table>
In this example, the <thead>
element is used to group the table header row (<tr>
) that contains the column labels: “Name,” “Age,” and “City.” The actual data rows are placed within the <tbody>
element, which represents the main body content of the table.
By using the <thead>
element, you help visually distinguish the header content from the data rows and provide a clear association between the column labels and their corresponding data.
It’s important to note that the <thead>
element is optional. If your table doesn’t have a specific header row or if the column labels are placed within the first row of the table, you can omit the <thead>
element and directly use the <tr>
elements for the column labels.