What does the <th> tag do?
The <th> tag (from table header) is used in HTML to create table header cells.
It looks like <td>, but has a semantic and visual difference: it indicates that the cell holds a column or row header, not ordinary data.
Main purpose
The <th> tag is used to mark table headers, which help make clear what each column or row means.
By default, the browser:
- makes the text bold;
- centers the cell's content.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
<td>Warsaw</td>
</tr>
</table>Here the row with <th> sets the column headers, while <td> holds the data.
The scope attribute
To improve accessibility (for example, for screen readers), you can specify what a header applies to:
scope="col"- a column header;scope="row"- a row header.
Example:
<tr>
<th scope="row">January</th>
<td>$1200</td>
</tr>It can also be used for side headers:
<table border="1">
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<th scope="row">January</th>
<td>1200</td>
</tr>
<tr>
<th scope="row">February</th>
<td>1500</td>
</tr>
</table>Difference between <th> and <td>:
| Tag | Purpose | Default styling |
|---|---|---|
<td> | Regular table data | Normal text, left-aligned |
<th> | Row or column header | Bold text, centered |
Conclusion:
The <th> tag creates a header cell in a table, which helps users and search engines understand the structure of the data.
It makes the table clear, structured, and semantically correct.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.