HTML Table Headers
What are Table Headers?
Table headers are cells that describe the content of columns or rows. They are created using the <th> (table header) element. Headers are important for accessibility and help users understand table structure.
The <th> Element
The <th> element defines a header cell. By default, browsers make header cells bold and centered:
Example
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>Column Headers
Column headers are placed in the first row of the table:
Example
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid black; padding: 8px;">Product</th>
<th style="border: 1px solid black; padding: 8px;">Price</th>
<th style="border: 1px solid black; padding: 8px;">Stock</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">Apple</td>
<td style="border: 1px solid black; padding: 8px;">$1.00</td>
<td style="border: 1px solid black; padding: 8px;">50</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">Banana</td>
<td style="border: 1px solid black; padding: 8px;">$0.50</td>
<td style="border: 1px solid black; padding: 8px;">30</td>
</tr>
</table>Row Headers
Row headers are placed in the first column of each row:
Example
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid black; padding: 8px;"></th>
<th style="border: 1px solid black; padding: 8px;">Monday</th>
<th style="border: 1px solid black; padding: 8px;">Tuesday</th>
<th style="border: 1px solid black; padding: 8px;">Wednesday</th>
</tr>
<tr>
<th style="border: 1px solid black; padding: 8px;">Morning</th>
<td style="border: 1px solid black; padding: 8px;">Meeting</td>
<td style="border: 1px solid black; padding: 8px;">Workshop</td>
<td style="border: 1px solid black; padding: 8px;">Break</td>
</tr>
<tr>
<th style="border: 1px solid black; padding: 8px;">Afternoon</th>
<td style="border: 1px solid black; padding: 8px;">Lunch</td>
<td style="border: 1px solid black; padding: 8px;">Training</td>
<td style="border: 1px solid black; padding: 8px;">Conference</td>
</tr>
</table>Scope Attribute
The scope attribute specifies whether a header is a column header or row header. This improves accessibility:
Column Scope
Example
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th scope="col" style="border: 1px solid black; padding: 8px;">Name</th>
<th scope="col" style="border: 1px solid black; padding: 8px;">Age</th>
<th scope="col" style="border: 1px solid black; padding: 8px;">City</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">John</td>
<td style="border: 1px solid black; padding: 8px;">25</td>
<td style="border: 1px solid black; padding: 8px;">New York</td>
</tr>
</table>Row Scope
Example
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th scope="row" style="border: 1px solid black; padding: 8px;">Name</th>
<td style="border: 1px solid black; padding: 8px;">John Doe</td>
</tr>
<tr>
<th scope="row" style="border: 1px solid black; padding: 8px;">Age</th>
<td style="border: 1px solid black; padding: 8px;">25</td>
</tr>
<tr>
<th scope="row" style="border: 1px solid black; padding: 8px;">City</th>
<td style="border: 1px solid black; padding: 8px;">New York</td>
</tr>
</table>Using thead, tbody, and tfoot
For better structure, use <thead>, <tbody>, and <tfoot> elements:
Example
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="border: 1px solid black; padding: 8px;">Product</th>
<th style="border: 1px solid black; padding: 8px;">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black; padding: 8px;">Apple</td>
<td style="border: 1px solid black; padding: 8px;">$1.00</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">Banana</td>
<td style="border: 1px solid black; padding: 8px;">$0.50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th style="border: 1px solid black; padding: 8px;">Total</th>
<td style="border: 1px solid black; padding: 8px;">$1.50</td>
</tr>
</tfoot>
</table>Styling Headers
Style headers differently from regular cells using CSS:
Example
<style>
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: #4b3190;
color: white;
font-weight: bold;
text-align: left;
padding: 12px;
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 8px;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>Accessibility
Always use <th> for headers instead of styled <td> elements. This improves accessibility for screen readers:
Example - Good (Accessible)
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Example - Bad (Not Accessible)
<table>
<tr>
<td style="font-weight: bold;">Name</td>
<td style="font-weight: bold;">Age</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Best Practices
- Always use <th> for headers: Don't use styled <td> elements
- Use scope attribute: Specify whether header is for column or row
- Use thead/tbody/tfoot: Structure tables properly for better semantics
- Style headers distinctly: Make headers visually different from data cells
- Consider accessibility: Headers help screen readers understand table structure