|Column header 1||Column header 2||Column header 3|
|Row 1 header||Row 1, cell 2||Row 1, cell 3|
|Row 2 header||Row 2, cell 2||Row 2, cell 3|
The table markup must include column and/or row headers (
th). Some screen readers that encounter a table without headers will treat it as a ‘layout table’ and communicate it quite differently.
Use the attributes
scope="row" to differentiate between column and row headers respectively.
Where there are both column and row headers, do not leave the first header cell empty as this can produce unexpected behaviour.
caption to label the table correctly. A heading element can be used within the caption if desired.
The grid structure of data tables must remain intact, no matter the available space. If there are many columns, the result may be horizontal scrolling. Based on the advice in Adrian Roselli's article Under-Engineered Responsive Tables, the basic table markup then needs to be amended as follows:
Wrap the table in a
divwith the data-attribute
data-component="table-wrap", and the attribute
tabindex="0"so that keyboard users can scroll it.
Add the following attributes to the wrapping
Add a unique ID to the
aria-labelledbyto the wrapping
divwith the caption ID as the value. This will correctly label what is now an interactive
|First name||Last name||Band name||Date of birth||Place of birth|
|Emma||Bunton||Baby||21 January 1976||Watford, Hertfordshire|
|Geri||Halliwell||Ginger||6 August 1972||London|
|Victoria||Beckham||Posh||17 April 1974||Harlow, Essex|
|Melanie||Brown||Scary||29 May 1975||Leeds, Yorkshire|
|Melanie||Chisholm||Sporty||12 January 1974||Whiston, Merseyside|
Notes on responsive tables
- The scrolling behaviour described above will not work if the table sits within a sidebar layout helper, because the sidebar layout helper tends to allow the table to grow.
- Unless a
min-widthis set on the
tdelements in the table, the cells will tend to shrink to allow the table to fit the available width, with content wrapping over multiple lines.