The `<thead>` tag is used in HTML to define a table header. It is a container tag that should be placed immediately after the `<table>` tag and before the `<tbody>` or `<tfoot>` tags, if present. The `<thead>` tag is used to group the table header content together and provide some structure to the table.
Here’s an example of a basic table with a header:
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>30</td>
</tr>
</tbody>
</table>
In this example, the `<thead>` tag contains a single row (`<tr>`) that contains three header cells (`<th>`): “First Name”, “Last Name”, and “Age”. The actual data for the table is contained in the `<tbody>` tag, which contains two rows (`<tr>`) with three data cells (`<td>`) each.
The `<thead>` tag can contain any number of rows and cells, depending on the complexity of the table. For example, you might have a table with multiple header rows, like this:
<table>
<thead>
<tr>
<th rowspan=”2″>Name</th>
<th colspan=”2″>Contact Info</th>
</tr>
<tr>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>jdoe@example.com</td>
<td>(555) 123-4567</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane.smith@example.com</td>
<td>(555) 987-6543</td>
</tr>
</tbody>
</table>
In this example, the `<thead>` tag contains two rows. The first row has a header cell that spans two rows (`<th rowspan=”2″>Name</th>`) and two header cells that span one column (`<th colspan=”2″>Contact Info</th>`). The second row has two header cells for the “Email” and “Phone” columns.
It’s important to note that the `<thead>` tag is optional. If you don’t use it, the table header will be inferred from the first row of the `<tbody>` tag. However, using the `<thead>` tag provides better structure to your table and can make it easier to style or manipulate with JavaScript.
In summary, the `<thead>` tag is used to define a table header and should be placed immediately after the `<table>` tag. It can contain any number of rows and cells to define the structure of the table header.
