|
== Complex tables ==
In contrast with simple tables, which only have one or two levelslevel of column headers, complexthat tablesspan haveone morecolumn than(<code>! two.scope="col" Most| likely</code>) youand/or willone onlylevel needof uprow toheaders fourthat levelsspan ofone headers.row Anything more(<code>! thanscope="row" that| should</code>), complex tables have headers that probablyaren't beclear splitand intocan acause separateaccessibility tableissues.
When headers span multiple rows, you need to clearly identify its relationship. When a column header spans two columns or rows, use <code>! scope="colgroup" colspan="2" | </code>. orWhen a row header spans two rows, use <code>! scope="rowgroup" rowspan="2" | </code> respectively to clearly identify the header as a column header of two columns or a row header of two rows.<ref name="H63" group="WCAG"/>
WhenFor tables with headers aren'tthat clearare andmore youcomplex, cannotit splitis recommended to simplify the table intoor simplersplit tablesit perup recommendations,into thissmaller cantables. causeWhen accessibilitythis issues;isn't thereforepossible, you have to associate each cell to their respective header(s) using the "'''id''' on the headers" and "'''headers'''" onattributes theirinstead respective data cells (e.g. <code>!of "'''scope="col'''". id="abc"On |the abc</code>headers, andset <code>|the headers="abcid" |to 123</code>).an Each id should have aun-spaced value that is unique towithin thatits table without spaces. IfOn athe cellcells belongsthat toare multipledescribed by headers, listset the header"headers" idsto separateda byspaced spaceslist inof the orderdescribing "id" values in whichan 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 code has the header of "Company" describing the company "ABC" (<code>! id="col1" | Company</code> and <code>| headers="col1" | ABC</code>).
Below is an example of a complex table with headers that aren't visually clear. Look at the source code of this section to see how each cell's "'''id'''" and "'''headers'''" are defined.
{| class="wikitable plainrowheaders"
|-
|
! scope="col" id="a" | a
! scope="col" id="b" | b
|-
! scope="colgroup" colspan="3" id="c" | c
|-
! scope="row" id="w" headers="c" | w (c)
| headers="a c w" | a c w
| headers="b c w" | b c w
|-
! scope="row" id="x" headers="c" | x (c)
| headers="a c x" | a c x
| headers="b c x" | b c x
|-
! scope="colgroup" colspan="3" id="d" | d
|-
! scope="row" id="y" headers="d" | y (d)
| headers="a d y" | a d y
| headers="b d y" | b d y
|-
! scope="row" id="z" headers="d" | z (d)
| headers="a d z" | a d z
| headers="b d z" | b d z
| 