A cell containing header information for a column.

To form a logical relation between the headers and the corresponding data in data tables < th> tags are used. These < th> tags are supported with HTML scope attribute. scope="col" forms a relation between the column header and its corresponding data. In certain scenarios, use of < th scope="col"> might not be possible. Usage of role="columnheader" helps in these situations. Role="rowheader" does the same functionality for < th scope=row">. Screen readers like JAWS and NVDA will recognize the columnheader (role) and rowheader(role).

columnheader can be used as a column header in a table or grid. It could also be used in a pie chart to show a similar relationship in the data.

Authors must ensure elements with role columnheader are contained in, or owned by, an element with the role row.

Example

<table summary="Marks of students for class IX">
<tr>
<td role="columnheader">Names</td>
<td role="columnheader">Mathematics</td>
<td role="columnheader">Physics</td>
<td role="columnheader">Chemistry</td>
</tr>
<tr>
<td role="rowheader">Student A</td>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td role="rowheader">Student B</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td role="rowheader">Student C</td>
<td>75</td>
<td>85</td>
<td>95</td>
</tr>
</table>

Note: Because cells are organized into rows, there is not a single container element for the column. The column is the set of gridcell elements in a particular position within their respective row containers.