The <th> HTML element is used to define a header cell within a table. It represents a header or a label for a column or a group of data cells in a table.
Here’s an example of how to use the <th> element:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<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>
</table>
In this example, the <th> elements are used within the first row (<tr>) of the table to define the column headers. The table cells (<td>) in the subsequent rows contain the actual data.
By using the <th> element instead of <td> for the header cells, you provide visual distinction and convey that those cells represent the headers or labels of the corresponding columns. This can enhance the readability and accessibility of the table.
You can also use additional attributes on the <th> element to further describe and associate the header cells with specific data. For example, the scope attribute can be used to indicate whether the header applies to a row or a column, and the abbr attribute can be used to provide an abbreviated version of the header text.
It’s important to note that the <th> element should be used within a <thead> element to group the table header cells. Additionally, the table structure should follow the correct order of <thead>, <tbody>, and <tfoot> for proper rendering and accessibility.
In summary, the <th> element is used to define a header cell within a table. It represents a header or a label for a column or a group of data cells. By using the <th> element for table headers, you can enhance the readability and accessibility of the table and provide clear labeling for the associated data.