Associating table body cells and table header cells

Associating a table cell with its header cells

The following table uses the headers attribute to associate table cells with their header cells. You will not see any effect on the formatted table, but when you generate the PDF, a screen reader will be able to use the headers information.

The following figure uses arrows to show the headers associations in the table.

For example:

• The green arrow shows that the header for "15%" in the first column is "Homework".
• The blue arrow show that the header for "15%" in the second column is "1" and that the header for "1" is "Exams".

'headers' contains the IDs of one or more header cells associated with the current table cell.

The headers attribute contains the IDs of one or more header cells associated with the current table cell. Header cells can also have headers attributes to refer to their associated header cells. The header cells associated with a table body cell are the header cells referred to in its headers plus those in the headers of those cells, and so on.

The following figure shows some of the markup for the preceding example:

• The green arrow shows that headers="h" on the <td> for "15%" in the first column refers to the ID of the <th> for "Homework".
• The blue arrows show that headers="e1" on the <td> for "15%" in the second column refers to the ID of the <th> for "1" and that headers="e" on that <th> refers to the ID of the <th> for "Exams".

Associating a header cell with its table cells

The following table uses the scope attribute to associate table header cells with the table cells to which they apply. You also won't see any effect on the formatted table, but when you generate PDF/UA, a screen reader will be able to use the scope information. Note that the only table header cells defined in HTML are the <th> within the <thead>. This table uses -ah-pdftag="TH" on some of the table body cells so that they are treated as table header cells in Tagged PDF and PDF/UA output.

The following figure uses shading to show the scope of the table header cells.

• "Name" is the header for the other cells in the same row. This is shown by the green background.
• "Expected" is the header for the other cells on its right in the same row. This is shown by the orange background.
• "Actual" is the header for the other cells on its right in the same row. This is shown by the pink background.
• "Points" is the header for "Expected" and "Actual" and, therefore, also for the cells for which they are the header. This is shown by the blue background.

'scope' indicates whether the current header cell applies to other table cells in the same row, the same column, or both the same column and row. The following figure uses shading to show how 'scope' indicates the scope of the table header cells.

• The green, orange and pink backgrounds show how to use 'scope' to associate a header with the cells in the following columns in the same row.
• The blue background shows how to use scope="rowgroup" to associate "Points" with the cells in the following columns of all of the rows that it spans.

If you have the option, it can be preferable to rearrange a table so that the structure is obvious without needing 'scope'. The following table has the same information as the preceding table but with the header cells at the top of the column or columns to which they apply: