Tables on websites

While design trends are moving forward and the table seems dated to many, nothing could be further from the truth. In fact, this element is a little "clumsy", but it still represents a great opportunity to convey the necessary information to users in a convenient way.

Why?

Website tables make everything clear and easy to organize . They can be used not only to present a small amount of information, but also more. They are great for comparing different types of offers, subscription plans, and other services, for example.

Long ago content is said to be easy to crawl. The idea is that the Internet user should be able to get to the content of the article fairly quickly just by looking back and forth. Tables make this as easy as possible.

So check out what to think about when designing tables on the web. sites. Here are 8 tips you might find helpful.

Things to keep in mind when creating tables on websites ?

1. Use different colors

Let's start with an example. Look at the screenshot below:

I must say, that the table presented is visually pleasing.

It is not exaggerated in terms of the amount of information, and the overall design leaves a pleasing impression. The information is fully readable.

Colors play an important role here, highlighting certain types of data.

Their use makes it easy to distinguish more important information from less important.

2. Support yourself with icons

Icons are extremely widely used on many websites.

This is not surprising as they are able to convey many words with just one image.

Our brain associates much faster with shapes and other visual elements than with text, which we have to read carefully to understand its meaning.

So you can say that icons are a kind of mental shortcut.

If the table you plan to create will contain data that can easily be replaced with icons, or if icons would be a nifty addition to it, use them.

3. Select the option

Again, let's use the example:

The screenshot above is sort of a price list. Here are three types of invoices that can be created using the service.

The middle option is highlighted for a reason - and color, and size.

This is just a suggested choice. Something recommended by the creators of the service in case we can't decide on something specific.

Sometimes it happens that we just can not make a decision. Therefore, we like to use someone else's opinion. This procedure allows us to bet on something - at least in theory - optimal.

If If you are interested in the topic of price lists, I have something for you. Bartlomey Kilyan once published an article on our blog about designing price lists on websites. Be sure to read this article full of valuable information and real life examples.

4. Don't combine, don't make it weird.

A table is a very simple, almost boilerplate form of data presentation.

It boils down to a grid - X cells on X.

It is most readable in its original, standard form, the one we are all used to.

This is what standards are used for, so that as many users as possible can easily navigate between them. Therefore, stick to them, as any deviation from generally accepted standards may raise questions.

5.Don't overdo it with the amount of information

Look at the screenshot below:

Ask yourself - is this table readable?

It can be improved in at least a few ways:

• quite a lot of features that are common to all packages - so you could get rid of the duplicate lines and mention somewhere that all these features can be found in each of the options
• the row background color is different for odd and even rows (it might be hard to see, but it really is), but with so many columns could distinguish colors between them more clearly
• just too much information presented at once

The last point is especially important. Our psyche already works in this way - when we have too many choices, we often feel uncomfortable and end up not making any decision (other than the one that leads to leaving this site).

6. Consider sorting

Tables on websites can be sorted as much as possible.

Usually, headings are clickable for this - the first click, for example, sorts the information on this column in ascending order, the second click - in descending order, and so on.

Of course, this only makes sense if, on the one hand, the table is large enough, and on the other hand, it contains data that makes sense to sort (number type).

7. Consider a search engine

A search engine that links to the data contained in a table might also be a good option.

Again, this only makes sense if the table is large and contains a lot of data.

However, it should also be borne in mind that now we are quite comfortable using search engines built into web browsers, so creating a search engine especially for a particular table should be well motivated.

8.Use appropriate cell spacing

The following is an example of a table that I think is extremely aesthetically pleasing:

It strikes the perfect balance between enough volume data and a sufficiently large so-called "white space", i.e. gaps between individual elements.

Such a "breather" is very useful for several reasons.

First of all, proper white space balance helps visually separate elements from each other. Thus, they are grouped in a certain way.

Secondly, large enough spaces have a positive effect on the level of data readability . That is why we use tables to enable users to easily read relevant information. They must not be hindered - they must be supported in this.

Thirdly, flat design is now in vogue, then there is the use of fewer elements, the rejection of complex shapes and shadows, and the use of the aforementioned free space. This design is simply pleasing to the eye.

What about responsiveness?

Tables can cause quite a few problems on mobile devices. They should also be well-styled for devices with narrow screens, because all the information they contain should look great literally everywhere.

For a more detailed explanation of how to achieve, among other things, the above effects (along with live examples and ready-to-use HTML and CSS code), see the excellent tutorial on the CSS Tricks site. The above animation is also taken from there.

Do tables on websites stay up-to-date?

Yes, of course.

Despite the fact that time is moving forward, tables on websites are doing well and there is no sign that this will change in the near future.

This is because it is a very simple and clear form of presenting information.

By moving our eyes over the rows and columns, we can easily examine the data we are interested in.

I hope you find the above information helpful.