3 Tips to Make Your UI Better - Tables
Tags: design, javascript, webdev
Published: 2022-08-19 17:43:00

If you are a frontend developer and create some tables/grids, keep in mind the following 3 simple tips so the outcome is more readable for your users:

## Tip 1 - format and use monospaced fonts for numbers

Imagine that you have a table like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9a2yg1jxlj7wpb4l6jv.png)

The column _No of items_ is hard to read - can you tell what is the number 9111111 at first glance? Let’s format it:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2w7tmeyhcwmqprifgqc.png)

Much better, but if you look at 9 111 111 and 1 999 999 in the table, the length of the 1 999 999 is much bigger and makes an illusion that 1 999 999 is greater than 9 111 111. It’s because the width of 1 and 9 in the chosen font is different. Let’s fix it with a monospaced font (all characters in such a font have the same width):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpzgv5b7413nl4wdrzaw.png)


The numbers are now easy to compare but the text became also monospaced. Unlike in the case of numbers, text is more readable without a monospaced font. There are fonts that are monospaced for numbers but not for other characters - let’s see the result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmlfvnuxwe5g9j7bk53z.png)

## Tip 2 - proper alignment in header and columns 

Let’s consider such an example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co0hia7mcxnwcilh80oi.png)

As you can see, the alignment is a bit strange. 

#### Alignment in columns
Let’s start with correcting the alignment in columns:
- align to left: text
- align to right: numbers - because it’s easier to compare the numbers this way

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcaisvpamc2db9kalyz5.png)

What about centering in columns?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btvqjcffx8sueo1n04ua.png)


It’s ok for columns with values of the same length (like “Sent”) but not recommended for other cases (like numbers and text with various length) because it’s much less readable.

#### Alignment in headers
General rule for alignment in headers is to fit the alignment in its column:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2k1xvn8sfwmqxqfr1bib.png)


It’s clear what the header is corresponding to.

## Tip 3 - don’t overuse colors and lines

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww6tbl5dzmgphokl8oc9.png)

It’s good to use delicate colors to make it easier to follow data in a row but too many lines make the look less readable and a bit old-fashioned.  


## Summary

From my experience, a neat and readable table should follow at least the following tips (of course there are many exceptions, I’m generalizing 🙂 ):
- for numbers - use monospaced font, for text - use not monospaced font,
- numbers should be aligned to right, text to left,
- colors shouldn’t bring users attention but the data should be easy to track in rows and columns.

Thanks for reading!