The difference between data tables and layout tables
"A data table is a table that displays relationships. These relationships do not have to be numerical. For example, there could be a table that displays provinces in Canada and the most common dog breeds in each province."
"Layout tables are present when an HTML table element is being used solely for visual formatting and relationships are not being displayed"
"Generally, it is best to avoid using layout tables when possible. Layout tables must be coded as presentational."
https://accessibleweb.com/question-answer/how-are-layout-tables-and-data-tables-different/
Data Tables
Used for showing relationships in data.
These must have captions. The caption is the first thing after the opening table tag and it is read out by the screen reader.
Column headers, row headers or both are used to help screen reader users understand what each cell relates to. TH rather than TD indicates a cell that is a header.
The header cells include a 'scope' value which tells the screen reader whether they are a row or column header.
The code for a very basic data table without a top header row would look like...
<table>
<caption><h2>Caption Here</h2></caption>
<tbody>
<tr>
<th scope="row">Row 1 Header</th>
<td>Row 1 Data</td>
</tr>
</tbody>
</table>
Caption Here
Row 1 Header |
Row 1 Data |
The inclusion of <tbody> before the data rows and </tbody> after them isn't necessary for accessibility but is often used, and the editor will do this on edited tables.
Examples with no top header row
2 Column Times With No Top Header Row
Monday |
Insert Monday times here |
Tuesday |
Insert Tuesday times here |
Wednesday |
Insert Wednesday times here |
Thursday |
Insert Thursday times here |
Friday |
Insert Friday times here |
Saturday |
Insert Saturday times here |
Sunday |
Insert Sunday times here |
3 Column GP Partners Table with no header row
Dr John Smith |
(Male) |
MBChB MRCGP |
Dr Peter Jones |
(Male) |
MBBS DRCOG MRCGP |
Dr Carol Brown |
(Female) |
MBBS MRCGP |
Dr Alison James |
(Female) |
MBBS MRCGP, DRCOG, DFSRH |
3 column times With No Top Header Row
Monday |
Monday times here |
Monday times part 2 |
Tuesday |
Tuesday times here |
Tuesday times part 2 |
Wednesday |
Wednesday times here |
Wednesday times part 2 |
Thursday |
Thursday times here |
Thursday times part 2 |
Friday |
Friday times here |
Friday times part 2 |
Saturday |
Saturday times here |
Saturday times part 2 |
Sunday |
Sunday times here |
Sunday times part 2 |
4 column times With No Top Header Row
Monday |
Monday times here |
Monday times part 2 |
Monday times part 3 |
Tuesday |
Tuesday times here |
Tuesday times part 2 |
Tuesday times part 3 |
Wednesday |
Wednesday times here |
Wednesday times part 2 |
Wednesday times part 3 |
Thursday |
Thursday times here |
Thursday times part 2 |
Thursday times part 3 |
Friday |
Friday times here |
Friday times part 2 |
Friday times part 3 |
Saturday |
Saturday times here |
Saturday times part 2 |
Saturday times part 3 |
Sunday |
Sunday times here |
Sunday times part 2 |
Sunday times part 3 |
The code for a very basic data table with a top header row would look like...
<table>
<caption><h2>Caption Here</h2></caption>
<thead>
<tr>
<th scope="col">Column 1 Header</th>
<th scope="col">Column 2 Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Row 1 Header</th>
<td>Row 1 Data</td>
</tr>
</tbody>
</table>
Note, the top header row is within a thead tag and the rest is within tbody. We need to include thead around a top header row because the editor may mark it as being part of the tbody otherwise and that would be wrong, strictly speaking.
Caption Here
Column 1 Header |
Column 2 Header |
Row 1 Header |
Row 1 Data |
Caption Here
Column 1 Header |
Column 2 Header |
Row 1 Header |
Row 1 Data |
Caption Here
Column 1 Header |
Column 2 Header |
Row 1 Header |
Row 1 Data |