Adding Table Headers and Captions in HTML

To make a table easier to read, you can use the th element to define header cells, and the caption element to add an overall caption/title to the table.

While standard td cells hold your data, without headers, users might not know what that data means. Adding headers and a caption gives your table context and improves accessibility.

Adding Headers with th

To add a header to a table, use the th (table header) tag instead of the td tag (table data):

By default, browsers usually render the text inside a th as bold and centered. You can place header cells at the top of a column (for a row of table headers), or at the start of a row (for a column of table headers).

The Scope Attribute

For screen readers to properly announce the table data, you should add the scope attribute to your th tags. This tells the browser whether the header applies to a col (column) or a row:

Adding a Caption

The caption element acts as a title or summary for the entire table. If provided, it must be the very first element inside the table tag (before any rows):

Full Working Example

The following example demonstrates a table with both a descriptive caption and column headers equipped with the scope attribute: