Best practice for tables

There are aspects we can implement to help enable users to read a table effectively.

1. Avoid unnecessary ink to page ratio.

Make sure to:

• avoid gridlines
• remember that the less space colours fill in, the brighter and more different they should be to be distinguishable; this gives an adequate contrast

2. Align the content appropriately.

When creating a table, make sure:

• it always contains headers that are distinguishable from the main body of table
• numbers are aligned to the right
• text is aligned to the left
• time series are read left to right
• categorical values are displayed in columns to the left of quantitative values
• calculated values are placed to the right of the values from which they are derived
• values to be compared are placed next to each other
• to put information at the point of need whenever possible

It is possible to embed linked footnotes into a table. However, jumping from one section of text to another can be disruptive. It is best practice to place footnotes in the table title, column headings or row labels. Avoid placing them in cells with data as it affects the alignment of the figures. For more information see these examples of tables and charts.

3. Consider condensing the information included.

Make sure you:

• use icons and abbreviations
• bring repeating words from within the column cells, into the column header
• use a shorter number format or rounded numbers. For example, 1.3m instead of 1,300,000 and 0.1 instead of 0.1129302. This depends on the customer’s need for accuracy.

4. Consider narrowing (down) your columns.

Make sure you:

• consider what information is essential
• use more rows than columns. The fewer columns your table has, the more readable it becomes (especially on mobile phones). Three columns will comfortably fit on mobile but more will not

5. Prioritise rows over columns.

When creating your table consider:

• restructuring your data
• aligning your information vertically, not horizontally, as humans find it easier skimming through information that’s vertically aligned

6. Consider highlighting tables with many rows.

If you can’t avoid many columns:

• stripe every second row with a light grey, such as NHS Grey 5 (#F0F4F5) as this helps aide the user’s gaze
• consider the ink to page ratio and do not use this unnecessarily

7. Limit your use of pagination.

Only use pagination if necessary as:

• pagination is not as easily accessible for a screen reader
• it runs the risk of all content not being shown to users, meaning users may miss out on key details, or they may have assumed there is no remaining data left to see

8. Focus attention where necessary.

Make sure you:

• separate (using a bold line) or highlight columns or rows that readers shouldn’t miss, such as an overall total
• make group summaries visually distinctive
• use bold, italics or colour only to group or highlight data
• use colour to focus attention and help the user navigate the table
• consider using different colours for different categories to help navigation
• consider colouring or using symbols for values, such as the highest and lowest values in a column
• use bright colours when colouring text, such as NHS blue (#005EB8)
• choose a pastel background such as a 20% tint of the NHS blue (#B8DCFF) when colouring whole cells, rows or columns

9. Use filters and sorts to help the user.

Make sure you:

• consider making your table filterable, searchable and sortable
• position this in the top right above the table, it should be easily accessible to the user
• consider how your table will be sorted

10. Add suitable visualisations where appropriate.

Make sure you use:

• bar charts, heatmaps and sparklines to pull focus and show comparison and general trends

---

Improve the playbook

If you spot anything factually incorrect with this page or have ideas for improvement, please share your suggestions.

Before you start, you will need a GitHub account. Github is an open forum where we collect feedback.