Data table
The Design Need:
You want to show a part of the content in a table since it the best and most convenient way to arrange the content.
Design Examples:
Design Solution:
Use the correct mark-up (html elements) to lay out the data in a table. A table consists of columns, rows and cells. These elements need to be well-defined, so that assistive technologies (such as screen readers) can also read the tables.
- Identify each element in the table correctly:
- Identify the column and row headers by using <th>
- Identify table cells by using <td>.
- If you use a caption for the table, use the <CAPTION> element.
- When possible, provide a summary including the primary purpose of the table and an indication of its overall structure (<table summary=…>. This summary is not visible but will be used by screen readers to inform users.
- In complex tables (tables with multiple levels), you should use the following elements to identify the data: id and headers.
- If possible, make your table sortable, especially if it contains large amounts of content, since this will help users to identify the elements they are seeking.
When to use:
Use tables for their original purpose: laying out tabular data. Do not use tables to lay out your page and arrange items on your webpage.
All data that can be ordered in columns and rows can be displayed in a data table.
Why use this solution (rationale):
How you mark up a data table is not particularly important for people who can see the table. For people that use screen readers, the correct use of html elements will make the difference between being able to access the data in the table or not.
More info elsewhere:
- Accessible Data Tables on www.usability.com.au
- CSS based tables on www.smashingmagazine.com
