Tables

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>

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

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.

Code to get a border as above: <table class="tableborder"> instead of <table> at the start