How it works
How it works
- Tables consist of the following elements: title, headline row, data rows, caption and footnote.
- The headline row is the only mandatory element that needs to be pre-defined as the first row of the table.
- Optionally, headline row can have a background-color
- Tables are designed for responsiveness:
- For the responsive display of the table, the table text rescales on different viewports.
- On extra small viewports, the table gets stacked to a two column layout with headers on the left. This vertically oriented layout supports good reading in portrait mode on smartphones.
How to use it
How to use it
- Use tables for a structured presentation of short pieces of information.
- Use tables to present numerical data.
- A clear table should always have a title and a headline row.
What to avoid
What to avoid
- Limit the height of the table. Make several tables or consider other ways of presenting information in clearly arranged groups.
- Avoid extensive text inside single cells of a table. It disrupts the presentation and makes information less readable. Consider other means of representation (e.g. footnotes).
- From an accessibility perspective, merged cells in tables should be avoided. On the one hand, these cells are never displayed correctly in a mobile view and it is impossible for screen readers to interpret them correctly.
Reference for publisher
To improve the accessibility of tables, the titles of columns and rows should be formatted as "header"