Tables are one of the easiest and most understandable (as long as they are structured correctly) ways to convey a large amount of information in a (relatively) small space on a website page.
In the past, tables were a basic tool for building websites. Some web designers would design entire websites in the form of tables. This is somewhat understandable, since the very structure of almost any space on a website can be mentally equated to a table. For example, the page you are currently viewing (if you are on a computer), we could assume that there are two columns of information – the text – the main information, and the sidebar, which contains secondary information.
On the other hand, however, just because something is possible and relatively easy does not mean that it should be done, nor that it should be done correctly. Sites in the form of tables are difficult to use and maintain, and, ultimately, huge tables do not give any information to search engines about the visual structure of the site, which prevents the bot from determining which information is primary and which is secondary. Which, in turn, obviously hinders good SEO results.
Don’t make sites using tables.
But this doesn’t mean you shouldn’t use tables at all. If you have information that you want to convey and that is logical and expected to be presented in the form of a table, of course, take advantage of this web element.
Example: To display a list of articles written by me, a table was used. See here.
Here’s what you should keep in mind when doing it:
Table header
Each column (vertical) should have its own value (name) that indicates to users what they are looking at. You could pin the table header so that no matter how far down the page the user scrolls (while still seeing the table) they still have context for the information they are seeing.
Rows
Rows must have visible borders (they do not have to be made using “border: XXpx solid #XXXXXX”, nor do the colors of the different rows have to be sharply contrasting (for example, between black and white). It is quite enough for one row to be light gray and the other white, for example, to distinguish between them and allow the user to see the information without straining their eyes.
Spacings
When building your tables, be sure to specify the same distance between the text and the cell borders (padding) so that each cell does not appear to be of a different size, as we too often manage to do in Excel, for example.
Search (optional)
If your tables are too large, you could integrate the ability to search internally (in the table) by keywords or rows.
Filters and sorting (by desire)
Again, for larger arrays of information presented through tables, it is good to add options for filtering the information according to the user’s needs as well as sorting (for example, from largest to smallest, etc.).
Adaptability
Tables, due to their width and need for space on the sides, rather than up and down, are a slightly more special element when it comes to mobile viewing. In this sense, unlike most web elements, they need to “spill over the display” and be able to display this information when the client wants it (by dragging it in one direction or another), and not, as with other elements, simply shrink it to fill the display.
Keep mobile devices in mind when building tables.
Pages (by (desire)
Another option for presenting large amounts of data in tabular form is to break it up into separate pages (on the table, not on the site) so that people can digest the information and move on to the next when they are ready. However, you need to be careful about what type of information you break up into separate pages.
