Once upon a time, tables were the darlings of the internet world. You used them for everything, not just tabular data. Does anyone remember layout tables? 

The world wide web moved on, and now, tables aren’t even that good for tabular data anymore. Who wants to look at a bunch of tiny table cells on their cell phone? The responsive website is making tables more of a headache than they’re worth. 

So, what’s a webmaster to do? 

In this blog, we’ve taken five real-life examples of tables being used on websites and we’ve given them makeovers! Follow along, and you’ll find out how to look critically at your tables and decide whether that’s the best way to present the data to your site visitors -- especially mobile visitors.

Keep in mind that we haven’t gotten rid of any of the data in these examples, or used fancy coding tricks. All of these makeovers were done in Composer, and you can check them out here.

Example 1: Too Much Information

This school offers a lot of summer programs, and with this table they’re offering a LOT of information about those programs! It’s overwhelming just to look at on a computer, and impossible to swipe through if you’re on a phone. You might think the tabular layout is convenient to compare the different elements of each program, but with such wide rows, you’re not even getting that benefit.

What are we going to do with it? Flip it!

That’s right, we’ve left the data in a table. Tables aren’t always the wrong idea! But this way, you can tell what you’re looking at for each program, and the table is narrow enough to be easily viewable on a mobile device. The consistent formatting of the rows makes it easy to compare the programs, even if the information isn’t right next to each other. 

Example 2: Over-formatted

Here’s information every student needs to know -- what time do classes start? And, even more importantly, when does lunch start? Or the pep rally? As vital as it is, putting that data in a table may not be the best way to format it.

In this case, a simple bulleted list format actually makes the information easier to understand.

Additionally, we’ve used tabs to separate the regular schedule from the pep rally schedule. This minimizes scrolling on smaller devices and just offers a cleaner look.

Example 3: Hard to read

The trouble with this table isn’t just that it’s not responsive; rather, this table is so jam-packed with information that it’s hard to understand at all. The headers and the data rows are all mixed up!

To make over this table, we had to ask ourselves how to make the data meaningful, as well as how to make it accessible for mobile users. So we graphed it!

These graphs were made in Google Sheets, although you could easily accomplish it in any spreadsheet program. Now you can tell at a glance how those scores were distributed for each subject, and it’s just more appealing to look at. We’ve also used three-column layout elements that will collapse on mobile devices, so it looks good on a big screen or a small one. (Pro tip: We used multiple layout elements for each row, so that when it collapses, the subjects will stay in alphabetical order.)

To keep the information in the graphs accessible for all users, we added the values into the alt text. This works for such simple data as we have here, but you’d want to consider including a summary of the table in the main text if you use this trick for a more complex data array.

Example 4: Unappetizing cafeteria menu

After all this table transitioning, who’s ready for lunch? Unfortunately, this grid is so hard to read you don’t know what you’re going to eat today. 

It looks like someone has tried to make a calendar out of a regular table, but why reinvent the wheel? Let’s just use a Calendar element!

With a calendar, not only is the data easier to read and mobile-responsive, you can also take advantage of all the other features Calendar Manager and the Composer Calendar element have to offer. We’ve added color keys to differentiate between lunch and breakfast. You can switch between month, week, and day views to drill down to just the information you want. You could even let users subscribe to the lunch calendar on their own calendar app, so they know right away whether they’re packing or buying. 

Example 5: Wall of text

To wrap things up, we present you with another wall of text, this time with a lot of unnecessary white space. The biggest problem with this table is that the URLs in the last column are much too wide, and they’re squeezing out all the other columns. 

So the first thing we did was replace all those URLs with hyperlinks. If you can’t think of any text you want to write for your hyperlink, you can always type out the name of the file. So do as we say not as we do in the screenshot below. Instead of "Link" it is better to list "Bird Island Scholarship Form." 

With that taken care of, we were still left with a table that doesn’t really need to be a table. Tables do take up less room when you have a lot of similar information to present, but if you don’t need to directly compare it, there are often better ways to save space. Like an accordion! In this case, we’ve created accordion panels for each scholarship, so visitors can focus in on just what they want to see.  

Conclusion

That’s our show! Er, blog. We hope that you’ve learned a thing or two about alternative ways to present tabular data, and that you’ll keep this exercise in mind the next time someone hands you a bunch of rows and columns to put up on your site.