Wikipedia:Manual of Style/Accessibility/Data tables tutorial: Difference between revisions

Revision as of 21:46, 6 December 2023

Revision as of 22:26, 6 December 2023

Line 270:

== Complex tables ==

In contrast with simple tables, which only have one level of column headers that spanspanning one column (<code>! scope="col" | </code>) and/or one level of row headers that span one row (<code>! scope="row" | </code>), complexsome tablesheaders havemay headersspan thatmultiple aren'tcolumns clearor androws canwith causethe accessibilityuse issuesof the <code>colspan</code> or <code>rowspan</code> attributes. To clearly define relationships and avoid theseaccessibility issues, relationshipsuse should<code>! bescope="colgroup" clearlycolspan="2" defined| </code> when spanning two columns and <code>! scope="rowgroup" rowspan="2" | </code> when spanning two rows, adjusting the number if spanning more.<ref name="H63" group="WCAG"/>

{| class="wikitable"

When a column header spans two columns, use <code>! scope="colgroup" colspan="2" | </code>. When a row header spans two rows, use <code>! scope="rowgroup" rowspan="2"| </code>.<ref name="H63" group="WCAG"/>

|-

! scope="col" rowspan="2" | column header 1

! scope="col" rowspan="2" | column header 2

! scope="colgroup" colspan="2" | column header group 1

! scope="colgroup" colspan="2" | column header group 2

|-

! scope="col" | column header 3

! scope="col" | column header 4

! scope="col" | column header 5

! scope="col" | column header 6

|-

! scope="rowgroup" rowspan="2" | row header group 1

! scope="row" | row header 1

| data || data || data || data

|-

! scope="row" | row header 2

| data || data || data || data

|-

! scope="rowgroup" rowspan="2" | row header group 2

! scope="row" | row header 3

| data || data || data || data

|-

! scope="row" | row header 4

| data || data || data || data

|}

<syntaxhighlight lang="wikitext">

{| class="wikitable"

|-

! scope="col" rowspan="2" | column header 1

! scope="col" rowspan="2" | column header 2

! scope="colgroup" colspan="2" | column header group 1

! scope="colgroup" colspan="2" | column header group 2

|-

! scope="col" | column header 3

! scope="col" | column header 4

! scope="col" | column header 5

! scope="col" | column header 6

|-

! scope="rowgroup" rowspan="2" | row header group 1

! scope="row" | row header 1

| data || data || data || data

|-

! scope="row" | row header 2

| data || data || data || data

|-

! scope="rowgroup" rowspan="2" | row header group 2

! scope="row" | row header 3

| data || data || data || data

|-

! scope="row" | row header 4

| data || data || data || data

|}

</syntaxhighlight>

For tables with headers that are more complex, it is recommended to simplify the table or split it up into smaller tables. When this isn't possible, you have to associate each cell to their respective header(s) using the <code>id</code> and <code>headers</code> attributes instead of <code>scope</code>. On the headers, set the <code>id</code> to an unspaced value that is unique on the page. On the cells that are described by headers, set the "headers" to a spaced list of the describing "id" values in an order that a screen reader should read them.<ref name="H43" group="WCAG">[https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H43.html "H43: Using id and headers attributes to associate data cells with header cells in data tables"], accessibility level: A</ref> For example, the following markup has the "Company" header describing the "ABC" company (<code>! id="col1" | Company</code> and <code>| headers="col1" | ABC</code>).