The beloved HTML table is one of the oldest elements on the web and one of the most used elements. It's incredibly important, for a number of reason which I'll cover down below. And sadly, it doesn't get the attention it deserves and I think it's a bit outdated by today's mobile-first standards.
Why is it important
There are a number of reasons why tables are important in this day and age, even if for the most part we don't normally notice that they're there. For one, tabular data has been around for thousands of years, so it's ingrained into our society at this point. When you click on Invoices for example on a website, you expect to see, a table. Of course. And for the most part you do. It's as basic a 1 to 1 representation of data that we can get to fit on viewable area. So I applaud you table, for all your efforts.
But equally as important is it's role in accessibility. A well formed table is invaluable to someone without the capability to see what's on the screen. Screen readers can navigate the cells and rows pretty efficiently. This opens up technology to more and more people worldwide, which is awesome. So again, the table is very important.
But it fall short
If there's one thing that I've battled with quite a few times during the past few years however, its table responsiveness. Normally this isn't a problem. Normally. But more so now than before, people really like tables. Love them. Columns to be in fact. And they love adding more each and every day. And by the nature of the table, it tends to normally expand in a horizontal position the more data points it needs. And that's a problem when we have limited screen real estate.
It's a problem because from a technical standpoint there's only so much that you can do, and unlike other webpage elements, tables do not tend to favor breaking into a newline.
But they do favor scrolling fortunately, just not by default on most browsers. Come on browsers. Time to step up that game. Scrollbars alleviate some of that stress for sure. But even then it's not a natural process for the table. Normally, having a well scrollable table comes down to wrapping inside of a div with overflow enabled and certain dimensions given.
And unfortunately, scrolling also has its limitations. Many many limitations.
- Not mobile friendly
- Horizontal scrollbar is way down on the page with large datasets
- Vertical scrollbar is way up on the page
- Headers are usually not visible
Not mobile friendly
Scrollbars on mobile do not make "mobile-friendly" I'm afraid. It won't break your website for sure, but it doesn't make it any friendlier to view datasets. Mobile friendliness normally involves making a webpage more usable on a mobile device, not more bearable.
Once our page hits a certain number of records, we can say goodbye to our horizontal scrollbar as it will get pushed to the bottom of the page. And on both mobile/desktop this dance of scrolling down to scroll left/right gets tedious fast. We can offset that by setting a short height on our parent div, but on a mobile device this isn't perfect and we'd have to account for the many different resolutions.
Any scrolling vertically will undoubtedly involve hiding some headers for some time. And then scrolling back up to glimpse and memorize, before jumping back down again.
If you read my rant on the Loading Icon, life saver and life giver, then you'll know what I mean next. Maybe we shouldn't do anything. Maybe it's time for a new specification for our beloved table to come through and help us out a bit. It wouldn't require much work from the browsers point of view.
- Lock headers on scroll
Two very simple, yet two very important things that right now are as tedious as adding a Loading Icon if we were to do them ourselves. And it's not just about the work that will be saved, but also the more ingrained in the browser it is, the less modifications are required from a development point of view, which is great for keeping accessibility alive and well.
Another problem is that no matter what solution I personally try to think of, it usually comes back to the same thing. Tabular data. And that's why it's difficult. It's like taking a pizza and trying to make a cake with it. It's already a pizza. It needs to be taken apart first, and reconstructed in order for that to work.
So maybe it's time we take a step forward and think of the next big thing. Maybe it won't resemble a table at all. Maybe it'll be circles. But maybe it'll make sense. Until that time though, let's show some much needed respect to the table, for all the great work that it continuous to do.
Did you find this article helpful / fun / useful?
Sign up for my weekly coding tips!
* I never share and/or sell your email folks!