When publishing on the web, your content will typically fall into one of these categories:
That covers pretty much everything you would publish.
Today we're taking a look at how to present a special type of written content: data. I use the term data loosely as any structured information best conveyed in a table.
Now here's the thing about tables: they don't fit well into small screens.
Way back in the day when computers were still strange, esoteric gray boxes, businessmen did their finances with pen and paper. They would create massive tables on paper that spanned entire tables. Sounds completely peculiar now, but that's how it was done. It wasn't until the first spreadsheet software was invented that this changed and tables (the visual kind, abstract code databases already existed) began to be integrated into computers.
You're surely familiar with Excel and Google Sheets. The programs work great on your computer, but they're tricky to use on mobile. Google Sheets does a pretty impressive job, but what about you? Sometimes you'll need to display data on your site in table form and getting it to display well across all the various screen sizes can be a nightmare. Lucky for you, this problem has been around for quite some time, so other devs have created some pretty nifty solutions.
I browsed through a few examples on Codepen.io and here are the best ones I found.
Responsive table solution #1
The first solution is 100% CSS which is pretty cool.
The labels are all moved to the left side so that they don't get bunched up at the top. While the visual isn't so nice, this layout works pretty well.
Responsive table solution #2
This next one is really interesting. It's similar to the first solution, but it uses the first cell in the header as a new header to separate the table entries. Here, take a look:
Responsive table solution #3
This last solution is my favorite. It breaks each table entry out into its own box which not only looks beautiful but is also very easy to scan:
Can you believe that it's done entirely with CSS? And no, the markup isn't weird, it's perfectly valid HTML.
Thanks for reading and I'll be back with more soon. Next up will be a bit more about publishing written content and making it responsive.