Web Interface Handbook / Typography

Tables

01 Readable tables

A table is an excellent way to show data for comparison and primarily numerical values. It raises questions about whether the table contains images, lists, headings, and another rich formatting on multiple lines.

02 Borders in the table should be light

Too thick lines in tables create noise and block attention. When reading a table, it's better to see the data itself, not the borders. So thinner and lighter lines are more comfortable to read the table.

03 Lines in tables are not necessary

In fact, lines in tables are almost not necessary. It is quite enough if the table has only a line at the header. Such a table will be well-read, airy, and easy to feel.

04 Make the table attractive

If the design goal is to make the table more accented among all the content, a good solution might be a background at the table header. Another way to make a table clearly stand out from its surroundings is to use a monospace font in it. This is beautiful, unusual, and may even improve readability.

05 Sometimes a chart is better than a table

A chart simplifies and speeds up understanding, and the users do not have to analyze, compare, and build sequences in their heads. Therefore, it is often possible to discard unnecessary information from a table and present it as a chart.

Prev
Headings
Next
Quotes