A table header in HTML is often specified using the <th> tag.
<html>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
So, in the above example the table header is represented using the <th> tag.
<th>Name</th> <th>Class</th> <th>Roll</th>
Now, let us say by mistake(Although it would never happen), we have placed the header in the last row.
<html>
<body>
<table border = "1">
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
</table>
</body>
</html>
As by mistake, we have placed the header in the last row, the table header also got placed in the last row.
Now, think logically, the table header should always be placed on top of the table. But in the above scenario it got placed on the last row.
To avoid such scenarios, there is a tag called thead tag, which tells the browser that this is a table header and it should always be placed on top of the table.
<html>
<body>
<table border = "1">
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
</thead>
</table>
</body>
</html>
So, in the above example we have placed the table row with headers(i.e. Name, Class and Roll) within the thead tag.
<thead> <tr> <th>Name</th> <th>Class</th> <th>Roll</th> </tr> </thead>
And even though we have placed the table header in the last row, still the table header appears on the top of the table.