SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Design Web Tables Without Screwing It Up – A 2019 Guide

March 11, 2019 by Alex Fox

Web tables are antiquated technology. If you don’t know this, welcome to the club that everyone else joined in 2010. Tables as a layout tool are a hack, a corruption of HTML used to create layouts that the code hadn’t thought of yet. When tables were added in HTML in 1996, this was in the earliest days of CSS. While limited positioning tools were available, they were far from robust enough to handle the bursting creativity of the emerging World Wide Web.

Thanks to their stability, HTML tables became the de facto way to design any Web page beyond basic text. Tables were not use to display data, but to enforce grid-based layout patterns, which required fighting the natural desires of tables the entire way. They were poorly equipped for handling the layout of most of the web, and yet nothing better existing. It was a grim time. If you care to experience those halcyon days, ask anyone who stumbled down the almost-finished staircase that we called “the Internet” back then can tell you how bad it was.

The balsa wood frame of HTML quickly broke under the demands of a web cracked open to the common American by AOL and Netscape, despite dedicated and ongoing efforts, as well as substantial market pressure, to offer new tools and functionality as soon as they were available.

An especially extreme example of the late-90s splatter painting style with table layouts on “etailer” arngren.net, which unbelievable retains the design to this day.

Yet despite the barely-papered house that was the World Wide Web in the late 90s, even con artists with non-existing services were raking in major dollars, and there was a push to be ready for financing as soon as possible. The boom was supported by exponential increases in users in the early days of the Internet, but that bustling excitement wasn’t to last. It was a gold rush, and eventually the gold ran out.

The tech bubble popped in the early 2000s and fundamentally changed the nature of the web as a business. It wouldn’t be for many more years that the web as a designed space was changed in kind.

What are Tables Good For

Tables should only be used for tabular data. Tables on the web are good for the same thing that tables in a book are good for: displaying detailed numerical data for a group of samples across multiple measured conditions.

That sounds like a mouthful, but it’s really quite simple. You have multiple samples. You put those samples in multiple “conditions” then measure some attribute. The measurement is the data. Of course, the word “conditions” is enormous vague, but that’s on purpose: these conditions are literally anything the researchers can imagine. The samples interact with the conditions, and the data is collected.

In short, tabular data has two basic qualities:

  1. All records share the same properties or variables; each sample has data for the same conditions
  2. Unique records are mapped to multiple variables, allowing data to be organized “by row.” (In general, if you can plausibly consider displaying the data by row, a table is likely a good choice.)

For a deep dive on the type of data best displayed in tables, jump into Jonathan Callahan’s exhaustive analysis on tabular versus relational data.

Tables Are For Multidimensional Data

TireRack reports the results of their user surveys in standardized categories. Each sample (the tire) is shown in each condition (recommendation, weather conditions, mileage, and so on.)

Use tables to display multi-variate change in data. For example, consider a table showing the customer rating for tire performance in various categories. Seven tires are tested and given scores from zero to ten in a variety of categories. Each tire is a unique record, creating it’s own row. The results of that record over multiple variables is recorded as the data.

This data set can be said to be multidimensional: it shows multiple dimensions over multiple conditions. The tires can be considered our records and the various rating categories can be considered our variables. A specific tire, i.e. a record, experiences a given variable, i.e. the weather condition. When these two conditions interact, data is created. That data is shown at the intersection of those columns and rows.

Tables can collate a “super list” comparing results across the same variables. This colored table by FiveThirtyEight calls out interesting data with cell shading, a common and effective technique for calling out data patterns visually in tables.

Tables Versus Grid Layouts

Calendars are often described as tables, but that’s backwards: all tables are grids, but not all grids are tables. Calendars are not tabular data. And if you remember your catechism, you’ll know that tables should only be used for tabular data.

While this does use a grid layout, most pricing pages are actually side-by-side lists than they are tables. While these designs might superficially resemble tables, flexbox is better for these layouts than the <table> element.

While pricing comparisons superficially resemble tables, they’re often better arranged with flexbox to allow for more responsive designs.

But why? Tables are fundamentally excellent at portraying data. They can show detail in ways other data visualizations cannot. However, tables get this level of detail by being bad at displaying literally everything else. Small cells with a single value in each box are where tables are the most useful.

What constitutes data? It’s not just numbers. Not any kind of data can go in a table. A table requires a specific sort of statistical corpus to be the most effective.

What are Tables Bad For?

A table-based layout in the style of many late-90s web pages. If you were very lucky, you might also find iframes on the same page.

Tables are not good for data that could be better presented visually. Tables are excellent at capturing fine detail, since they show precise values for each data point. But they can’t do a great job of showing trends. That’s where line graphs excel.

Tables also aren’t great at comparing the relative quantities of things, like inventory, since there’s only one dimension for each sample. This is called single-dimensional data, and it’s better show in a line graph against time or a bar graph against other relevant categories.

Pie charts, though out of vogue, are typically used to describe percentages. But because they don’t allow the user to easily compare the relative size of any two quantities, they’ve become less popular among data designers. Better to use a bar graph, which includes a helpful feature: any two bars can be quickly compared to see which one is larger. Even across large data sets, users can make snap judgements about the relative sizes of two data sets. That’s brought bar graphs into vogue over the recent decade, and you’ll now see them employed even in situations where a table would be better suited.

Conclusion

In short, it you want to show precise values in multidimensional data, a table is your go-to tool. If you what to show change over time use a line graph. For relative magnitude, use a bar chart.

You might also like the following posts:

4 Examples of Bad UI and How to Avoid Them

Building Image-Rich Websites Without the Lag

How to Compress Video For Online Streaming

Filed Under: Design Tagged With: web design

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022