Table Header Row

What is a Table Header Row?

A table header row is the top row of a table that acts as a title for the type of information users will find in each column.

We often manually bold the top row to emphasize the header information, but it's important to mark table headers at the code level so the change is also structural.  You can't tell from looking at a table if it's been manually bolded or not - but screen readers will read structural headers aloud, aiding in ease of navigation and accuracy.

Table Header Row Example

Benefits of Table Header Rows?

Marking table headers tells screen readers users how to read tables. If the table headers have been properly marked, the user is able to navigate table cells and hear which column they are currently in. Marking a table header row or column therefore helps transform random data into meaningful data.

Screen reader users aren’t the only ones to benefit from properly marked table header rows. If header rows are properly configured, tables will continue across more than one page, Readers can keep track of where they are in the table without having to flip back and forth between pages.

Table Header Row Guidelines

• Use tables for data, not for layout.
• Have only one header row per table.
• Have only one header column per table.
• Avoid blank cells, especially in the header row or column.
• Avoid merged and/or split cells.
• Avoid title rows in the middle of a table. Instead, break up the table into two (or more) separate tables.