| `) and table data (` | `) cells which, in turn, contain all the data.
In the DOM, before any of this, you may find two additional features: the table caption (` |
|---|
| ` cells, thereby creating three columns. The body contains three rows of data: the first cell is a header cell for the row, so we use ` | ` instead of ` | `. The ` | ` cell has semantic meaning, with implicit ARIA roles of [columnheader](https://w3c.github.io/aria/#columnheader) or [rowheader](https://w3c.github.io/aria/#rowheader). It defines the cell as the header for the column or row of table cells, depending on the value of the enumerated `scope` attribute. The browser will default to `col` or `row` if `scope` is not explicitly set. Because we have used semantic markup, the `1956` cell has two headers: Year and Lou Minious. This association tells us that "1956" is the "year" of graduation for "Lou Minious". In this example, as we can see the entire table, the association is visually apparent. Using ` | ` provides the association even when the header column or row has scrolled out of view. We could have explicitly set ` | Year | ` and `Lou Minious | ` but with a table like this, the enumerated default values work. Other values for `scope` include `rowgroup` and `colgroup`, which are useful with complex tables. ## Merge cells Similar to MS Excel, Google Sheets, and Numbers, it's possible to join multiple cells into a single cell. This can be done with the HTML `colspan` and `rowspan` attributes: - `colspan` merges two or more adjacent cells within a single row. - `rowspan` merges cells across rows when added to the cell in the first of your merged rows. In this example, the table header contains two rows. The first header row contains three cells spanning four columns: the middle cell has `colspan="2"`. This merges two adjacent cells. The first and last cells include `rowspan="2"`. This merges the cell with the cell in the adjacent row, immediately beneath it. The second row in the table header contains two cells; these are the cells for the second and third columns in the second row. No cell is declared for the first or last column as the cell in the first and last columns in the first row span two rows. In cases where a cell is defined by multiple header cells with associations that cannot be set by the `scope` attributes alone, include the `headers` attribute with a space-separated list of the associated headers. As this example is a more complex table, we explicitly define the scope of the headers with the `scope` attribute. To be even clearer, we added the `headers` attribute to each cell. The `headers` attributes may not have been necessary in this case, but they're important to remember as your tables grow in complexity. Tables with complex structures, such as tables where headers or cells are merged or with more than two levels of column or row headers, require explicit identification of associated header cells. In such complex tables, explicitly associate each data cell with each corresponding header cell with a list of space-separated `id` values of all the associated headers as the value of the `headers` attribute. The `headers` attribute is more commonly found on `` elements, but is also valid on ` | `.
That said, complex table structures can be difficult for all users,
not just screen reader users, to understand. Cognitively
and in terms of screen reader support, simpler tables, with few to no spanned cells, even without adding scope and headers, are better understood.
They're also easier to manage!
## Style tables
There are two relatively obscure elements that were briefly mentioned: the column group, [`
|
|---|