Table Headers and Caption
Add header cells and a caption to describe your table.
Syntax
<table><caption>Title</caption>...</table>Header cells use the <th> element. By default they appear bold and centered.
The <caption> element adds a title to the table. It should be placed right after the opening <table> tag.
Example
Loading editor…
Press Run to see the result.
When to use it
- A financial table uses <th> for column names like "Month", "Revenue", "Expenses" so screen readers announce headers before data.
- A schedule grid uses <th> for both day names across the top row and time slots down the first column.
- A comparison table uses <th scope="col"> and <th scope="row"> to semantically associate each data cell with its headers.
More examples
Table with column header row
<th> cells in the first row become bold centered column headers that identify what each column contains.
<table>
<tr>
<th>Name</th>
<th>Role</th>
<th>Department</th>
</tr>
<tr>
<td>Alice</td>
<td>Developer</td>
<td>Engineering</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
<td>Product</td>
</tr>
</table>Row headers using th in first column
<th> in the first column acts as a row label, making the table readable left-to-right.
<table>
<tr>
<th>Month</th>
<td>January</td>
<td>February</td>
<td>March</td>
</tr>
<tr>
<th>Sales</th>
<td>$4,200</td>
<td>$5,100</td>
<td>$6,300</td>
</tr>
</table>Headers with scope attribute
scope="col" and scope="row" explicitly associate each header with its column or row for accessibility.
<table>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Stock</th>
</tr>
<tr>
<th scope="row">Widget A</th>
<td>$9.99</td>
<td>142</td>
</tr>
<tr>
<th scope="row">Widget B</th>
<td>$14.99</td>
<td>87</td>
</tr>
</table>
Discussion