headers attribute: td headers, th headers
The headers attribute on the td, th elements:
- allows you to associate a cell (td, or th) to one or more header cells (th), thus creating a relationship between the cells, relationship which can be read by screen readers
- this association is done through the value of the id attribute of a th element, value used as value of the headers attribute on the corresponding td element
- headers is a specific attribute → can be applied ONLY on the next html elements: td, th
Examples
| <th | attribute | = | "value(s)" | > | ... | <⁄th> | Examples |
|---|---|---|---|---|---|---|---|
| 3. | headers | = | th_id_value | < headers="th_id_value"> ... <⁄> < headers="th_id_value"> ... <⁄> |
Video demonstration headers attribute on td, th elements
HTML5 headers on td ⁄th Tutorial
| min | video details |
|---|---|
| 00:05 | video tutorial: td, th elements, headers attribute |
| 00:06 | headers attribute applied on td ⁄ th allows you to associate a cell (header cell, data cell) to one or multiple cells, thus creating a relationship which can be read out loud by sreen readers |
| 00:16 | this table has both td, th elements on which we will add the headers attribute |
| 00:26 | the table has 6 header cells: 6 th |
| 00:35 | 2 header cells are spanning 2 columns: we can call them 'main' header cells: thA, thB |
| 00:43 | thA 1, thA 2 belongs to thA thB 1, thB 2 belongs to thB we can call these 'secondary' header cells |
| 00:54 | each secondary header cell has corresponding data cells: e.g. thA 1: A1, a1 |
| 01:03 | we know (because we can the structure of the table) that A1 is associated to thA 1 which is associated to thA |
| 01:10 | but for those who can't see ⁄ read and rely on the screen reader, A1 is NOT associated to thA 1 which is NOT associated to thA UNLESS we manually associate it through headers attribute, creating a relationship screen readers can speak (can read it out loud: e.g. the header(s) will be read too when they reach to an associated cell) |
| 01:18 | first: let's associate thA 1 to thA |
| 01:28 | adding headers attribute to thA 1 |
| 01:33 | the value of the headers attribute on thA 1 is the value of the id attribute from thA |
| 01:44 | thA 1 has been associated to thA through headers attribute |
| 01:47 | let's associate thA 2 to thA |
| 01:54 | thA 2 has been associated to thA |
| 01:59 | the same, we will associate thB 1 and thB 2 to thB |
| 02:25 | thB 1 and thB 2 have been associated to thB |
| 02:29 | moving to data cells: td |
| 02:32 | second: let's associate A1 to thA and thA 1 adding headers to A1 |
| 02:44 | the value of the headers attribute on A1 is the value of the id attribute from thA, followed by the value of the id attribute from thA 1, separated by space |
| 03:08 | A1 has been associated to thA and thA 1 |
| 03:08 | note: this association does not display in browser; it's for screen readers only |