Table Header TH Is Missing from Data Table

Table Header TH Is Missing from Data Table — rule summary

Field	Value
Rule code	Table_Header_Missing
WCAG conformance level	A
WCAG success criterion	1.3.1 Info and Relationships
Must be fixed at source	No

Description

Tables display information in rows and columns. Column Headers identify what kind of information is shown in each particular column of a row. We detected that a table header (th) is missing from the data table found. The name of a column's heading can be found in the text content of the corresponding TH HTML tag. Table headings for columns of data should have a populated content corresponding to what the column presents. Without a TH tag for each column, users are likely to find the content and navigation of the table confusing.

How to fix

Add <th> elements in your table as headers. Each <th> element appears inside a <tr> (table row) element. Use scope="col" or scope="row" to mark whether the header applies to the column or row.

<table>
  <caption>Personal favorite foods</caption>
  <thead>
    <tr>
      <th scope="col">Person's name</th>
      <th scope="col">Favorite food</th>
      <th scope="col">Second favorite food</th>
    </tr>
  </thead>
  <tfoot></tfoot>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>tacos</td>
      <td>apple pie</td>
    </tr>
    <tr>
      <th scope="row">Brenda</th>
      <td>ice cream</td>
      <td>pasta</td>
    </tr>
    <tr>
      <th scope="row">Chaz</th>
      <td>stir fry</td>
      <td>hummus</td>
    </tr>
  </tbody>
</table>