HTML Tables

This post is base on HTML table advanced features and accessibility on MDN.

Some Attributes and Elements

  • Use colspan and rowspan of <td> to make a cell take extra spaces on rows or cols.
  • Use <colgroup> and <col> to specify the same styles for every <td> in the same column of a table, put <colgroup> just below the opening <table> tag.
  • Use <caption> to provide the summary of the table. Put <caption> just below the opening <table> tag, the caption is meant to contain a description of the table’s content, this is useful for readers wishing to get a quick idea of whether the table is useful to them as they scan the page, especially for blind users, rather tha have the screenreader read out the whole contents of the tables with many cells, it can just read the caption for them to decide.

Structuring the Table

You can add structure to your table with <thead>, <tfoot> and <tbody> elements.

As your tables get complex in structure, it is useful to give them more structural definition. We can use <thead>, <tfoot>, and <tbody> to do this, which allow you to mark up a header, footer, and body section of the table.

These elements don’t make the table any more accessible to the screenreader users, also don’t result in any visual enhancement on their own. They are however very useful for styling and layout — acting as useful hooks for adding CSS to your table. A good example is when you have a very long table, you could make the table header and footer repeat on every printed page, then make the table body display on a single page and have the contents available by scrolling up and down.

More details about these three attributes:

  • <tfoot> is not required to be put at the end in the <table> element, you can also put it after the <thead> element, the browser will also render it at the bottom of the table.
  • In fact, <tbody> is always included in every table, if you don’t add <tbody> yourself, browsers will add it for you.

Nesting Table

Simply put another complete <table> inside another <tables>‘s <td> or <th>, for example:

Heading 1 Heading 2
Data 1 Data 2
1 2 3
nest 1 nest 2 nest 3
Data 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>nest 1</td>
<td>nest 2</td>
<td>nest 3</td>
</tr>
</table>
</td>
<td>Data 2</td>
</tr>
</tbody>

<tbody></tbody>
</table>

Tables for Visually Impaired Users

There are around 253 million people living with visual impairment according to WHO data in 2017

Tabular data reprensted in table make it easy for us to find the information we want, but unlike plain text, it’s not easy for visually impaired users to get information quickly from a table, nevertheless, with proper markup, we can replace these visual associations by programmatic ones.

Techniques to make the table as accessible as possible are talked below.

Using Columns and Rows Headers

With columns and rows headers created with <th>, screenreader users can interpret the table based on these two coordinates similarly to how a sighted user does.

The scope Attribute

The scope attribute can be added to the <th> element to tell screenreaders is the <th> a header for the row it is in, or the column.

scope can be set to col, row, colgroup and rowgroup, look at the example below:

Items Sold August 2016
Clothes Accessories
Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15
Brussels 51 27 38 69 28
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<table>
<caption>
Items Sold August 2016
</caption>
<tbody>
<tr>
<td></td>
<td></td>
<th colspan="3" scope="colgroup">Clothes</th>
<th colspan="2" scope="colgroup">Accessories</th>
</tr>
<tr>
<td></td>
<td></td>
<th scope="col">Trousers</th>
<th scope="col">Skirts</th>
<th scope="col">Dresses</th>
<th scope="col">Bracelets</th>
<th scope="col">Rings</th>
</tr>
<tr>
<th rowspan="3" scope="rowgroup">Belgium</th>
<th scope="row">Antwerp</th>
<td>56</td>
<td>22</td>
<td>43</td>
<td>72</td>
<td>23</td>
</tr>
<tr>
<th scope="row">Gent</th>
<td>46</td>
<td>18</td>
<td>50</td>
<td>61</td>
<td>15</td>
</tr>
<tr>
<th scope="row">Brussels</th>
<td>51</td>
<td>27</td>
<td>38</td>
<td>69</td>
<td>28</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">The Netherlands</th>
<th scope="row">Amsterdam</th>
<td>89</td>
<td>34</td>
<td>69</td>
<td>85</td>
<td>38</td>
</tr>
<tr>
<th scope="row">Utrecht</th>
<td>80</td>
<td>12</td>
<td>43</td>
<td>36</td>
<td>19</td>
</tr>
</tbody>
</table>

The id and headers Attributes

An alternative to using the scope attribute is to use the id and headers attribute, you can a unique id to each <th>, then for each <td>, you add a headers attribute consisting a list of id seperated with space to specify its coordinates.

This method creates a very precise associations between headers (<th>) and data cells (<td>), but it use a lot more markup, the scope attribute is
usually enough for most tables.

If there are headers creates with rowspan or colspan, the headers attribute of <td>s may have more than 2 words.

HTML table advanced features and accessibility by Mozilla Contributors is licensed under CC-BY-SA 2.5