Tables | Elements | UI Typography

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 complex formatting on multiple lines.

A table with images and complex formatting is hard to read and a very strange solution.

The whole point of a table is to present the data in the best possible format for quick scanning and comparison. This can only be done if each table row has short one-line text and numbers.

It's good to have a table that reads and scans quickly.

In all other cases, the table becomes unreadable, even if it has no formatting and no images. Any long text or text in several lines makes the table awkward to read. So if there is more than one line of text in a cell, you should think about a different representation of the data.

A table with cell data in several lines reads poorly.

Borders in tables create noise and interfere with reading, especially if they are bold and contrasty. Users' attention keeps shifting to the borders themselves, which causes the eye to jump from the data to them.

Borders and lines distract from reading the table data.

It is better to make the borders thin and light. Then they will take on less attention. And vertical lines in tables are not needed at all; without them, the rows and columns are perfectly readable.

The table reads better without borders and vertical lines.

Although, in principle, lines can be completely removed from the tables. This does not interfere with reading the data but, on the contrary, makes the whole construction extremely easy and simple.

The table can do without borders and lines at all.

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.

A header with a background makes the table expressive.

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.

Monospace typeface makes the table unique.

Zebra makes reading the table worse in general, because the eye falls on the rows with dark stripes in the first place. Users have to strain hard to keep their attention on the rows with no background.

Although it seems that the zebra works better, in practice the table is more difficult to read.

Striped table is designed for wide tables, when it is difficult to keep attention on a long row of data and the background can help with that. Or in cases where the table is too long in height, stripes help to visually separate the rows and the data does not merge into a solid spot. But a table that's too wide or too tall is always a bad thing and a sure signal that something is going wrong. It is better to think about other simpler and easier presentation of data than to make huge tables and think of ways to read them better.

In general, a chart is often better than a table and shows the data more clearly and correctly. Especially if these data need to be compared.

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.

Often a chart is clearer and better than a table.

The table is a big problem on mobile devices. On small screens, there is almost always not enough space horizontally, and the table tends to extend beyond the screen. The easiest way out is to make the table scroll horizontally on these screens. A more complicated option is to turn each row of the table into a separate table of two columns.

On small screens, each row of the table turns into a separate table.

If your interface will work on screens of different sizes, it is worth immediately taking into account the behavior of the tables on them. It's probably better to build the data on a grid and columns than to select a table. This will help manage the appearance and building tables on different screens.

Presentation of tech specs on apple.com as a grid and columns.

In dashboards and control panels, tables are used to manage data. Often designers and developers go overboard with this and turn tables into overly complex structures with vast amounts of data and style.

The table with the list of customers is too crowded with logotypes, styles, and avatars. Image by Jordan Hughes

Such tables are overloaded with data, color, and images, and most of the information in them makes no sense. The principles and approaches to table design with data management are no different from those used in the text. The lighter the table, the faster it will be read and easier to scan. Therefore, it is worth discarding everything unnecessary and showing information more compactly.

A compact table is the way to a perfect interface.

For tables with data management, it's better to do searches and filters and so when users search for something in a table and filter the data, you can show details and additional information in the cells in the results. That makes sense.

Simplification immediately solves the problem of displaying the table on small screens. A straightforward table with a minimum of columns is ready to display on mobile devices.