Better UI Design: Proper Use of Tables

Better UI Design: Proper Use of Tables

Cameron Chapman
by Cameron Chapman

Tables have been part of HTML almost since HTML began. As the internet progressed and as people started doing more things online, designers started using tables to create multi-column website layouts. This was never the intention of those who created HTML standards, but it quickly caught on and table-based layouts became the norm online.

Better UI Design: Proper Use of Tables Image-1

When CSS became standard and table-based design was made obsolete, a lot of designers shunned them all together. Using tables in your websites, no matter what they were used for, became akin to using animated GIFs in some circles.

The problem with that is that tables are a vital part of good UI design. Tables have a purpose, and unfortunately they’ve been given a bad name that is neither deserved nor entirely accurate.

The Purpose of Tables

Tables were meant for displaying data. That’s it. When they were made part of the HTML standard, the idea was to make it possible to display tabular data, equivalent to a spreadsheet.

Purpose of Table

That purpose is still valid. Using tables for tabular data is perfectly standards-compliant and makes a lot of sense from an accessibility standpoint. Unfortunately, many designers have shunned tables to the point that they won’t even use them for their intended purpose, which brings us to our next point:

Don’t Use Faux Tables!

I don’t know how many websites I’ve seen that have created mock-ups of data tables using countless DIVs and CSS styles, rather than actual HTML tables. This is a bad idea for a couple of reasons: First of all, HTML tables are infinitely more accessible for those people who are using screen readers. Screen readers understand data arranged into tables. They don’t understand data arranged to look like a table when in fact it’s just a bunch of DIVs.

Faux Table

The second reason is that it’s just a lot more work, especially if your table is large, and you’re very limited in how you can manipulate the data inside a bunch of DIVs, compared to an actual table. There are scripts out there, already in existence, that allow you (or your visitors) to reorganize the data in your tables. Of course, most of these won’t work properly with DIVs.

Of course, you will want to use CSS to style your tables, but that’ll be covered below. The main thing you need to remember is that CSS should not be used to organize the data (that’s where HTML tables come in), only to style the data once it’s organized. Tables might seem like presentation (which, according to web standards, should always be done with CSS, not HTML), but in reality they’re organization. Organization of content is still part of content.

Still not convinced? Think of it this way: no one would propose you create faux-paragraphs with DIVs, would they? Paragraph tags exist to enclose paragraphs. So why wouldn’t you put tabular data within tags that exist specifically to enclose tabular data?

When to Use Tables

Tables should be used whenever you have tabular data to display. This could include charts of data or statistics, as well as things like price charts, product lists, or similar data that is logically arranged into a table format.

Better UI Design: Proper Use of Tables Image-2

A general rule of thumb is that if it’s something you would put into a spreadsheet, you’ll probably want to put it into a table. If you would use a text document instead, then put it in a list or paragraph format.

Tables Should Be Filterable & Sortable

If the tables you’ve created have more than a handful of rows and columns, usability will be greatly improved by making the data in them filterable and/or sortable. Since a table’s purpose is to lend meaning to a set of data, allowing visitors to reogranize that data based on their own parameters increases the potential meaning of that data.

Better UI Design: Proper Use of Tables Image-3

There are a number of plugins and scripts out there that let you make your tables sortable or filterable without having to hand-code them that way yourself. There are a number of jQuery plugins for manipulating data tables. Here are a few:

  • DataTablesA powerful plugin that lets you filter and sort your data, and includes a number of other powerful features.
  • uiTableFilterA table filtering plugin.
  • Tablesorter 2.0 Tablesorter lets your visitors sort tabular data by any column, in either ascending or descending order.
  • Table Drag and DropThis plugin lets users drag and drop rows to reorganize data in any way they want.

How to Style Your Tables

Hopefully by now you’re convinced that tabular data should be displayed in HTML tables, not forced into CSS DIVs. But that still doesn’t cover how best to present those tables. After all, the standard HTML table is a pretty ugly beast.

Better UI Design: Proper Use of Tables Image-4

Styling tables is done like any other CSS styling of content. But there are a few things you should keep in mind for better usability of tables. Here they are:

Use <caption> for Your Table’s Title

Most designers put the title of their table (if it needs one) in an H1 or other heading tag before starting the table data. Instead, use the <caption> tag. By default, this will put the table’s title centered just above the table itself, though it can be styled like any other element. The advantage to using <caption> instead of an H1 or other heading tag is that it adds context to the table. This is another accessibility issue, but if you can take the time to use a heading tag, you can take the time to use the more-accessible <caption> tag instead.

Style Your Rows

Better UI Design: Proper Use of Tables Image-5

In most tables, data is viewed row-by-row. Columns give context to the data, but rows give meaning. For this reason, the way you style your rows is vital. Each row needs to stand out from the ones to either side. To this end, you’ll see many tables use shaded backgrounds behind every other row. This makes it easy to scan across the various columns without inadvertently skipping from one row to the next. It’s vital that tables can easily be read, so make sure there’s good contrast between your text color and row backgrounds (which means you’ll generally want to avoid brightly colored backgrounds).

Borders and Padding

Better UI Design: Proper Use of Tables Image-6

Borders and padding are another way to keep your columns and rows easily distinguishable from each other. As a general rule, the larger your padding, the less necessary a border becomes, and vice versa. Also, if you’re opting not to use shaded backgrounds for alternating rows, you’ll almost certainly want to use a border between your rows, regardless of how small your table is.

Using padding and borders between columns is also vital. Unless there’s a lot of padding between columns, you’ll want to use at least a faint border to keep things straight. This becomes more important as a table grows longer.

Tooltips and Modal Windows

Adding tooltips and modal windows to data tables can be a great idea if you want to add more context to the data contained without having to put a huge explanation at the end of the table. These are a huge usability booster and make your table more interactive and interesting to visitors. Just make sure you’re using them to actually add value, and not just as a gimmick.

Conclusion

Despite the hesitation many designers have when it comes to using tables, they have a place and a purpose in website design, and should be used when appropriate. Just make sure you leave the table styling up to the CSS!

Further Resources

Banner Image by Lawrence Monk from Pixabay

AUTHOR
Cameron Chapman
Cameron Chapman
Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

RECOMMENDED ARTICLES

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: