Jul 26 2010

Better UI Design: Proper Use of Tables

Advertisement

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.

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.

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.

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.

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.

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.0Tablesorter 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.

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

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

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

About the Author

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.

Comments and Discussions
  • Jordan Walker, 26 July 2010

    Excellent information for tables, and user interface best practices.

  • Elliott, 26 July 2010

    I have been meaning to talk about this myself. I see a bunch of people building their own tables with divs and laugh at how long it took them.

  • Fatih, 26 July 2010

    very good site with good articles based the themes are.

  • fuzzimo, 26 July 2010

    I’ve seen many websites using tables as layouts, but why would anyone go to the trouble of creating a table with divs is beyond me.

  • James, 26 July 2010

    Some nice examples of proper use of HTML tables, thank you. I didn’t realise the proper way to do this for quite a while, but as you say it’s important to use proper coding rather than a “hack” solution using lots of divs.

    I think simplicity works best with tables, as these designs show

  • Joe, 26 July 2010

    Cameron, I like most of what you say about HTML tables, but I have to disagree with your premise, that there’s a “proper” way to use tables.
    I’ve been designing sites since ’93 and learned HTML the old fashioned way, by looking at other website source code until, that is, books on the subject were published about the new medium. This was pre-WYSIWYG editors, and surely long before CSS came along.
    These days I certainly use CSS, but in some cases, it’s much easier for me to layout something, whether tabular data or not, using HTML tables. You are so right, along with some other comments here, about using CSS leaving you with a ton of Div tags in your code that are hard to manage.
    The problem, as I see it, is in the web’s evolution, and someone along the way deciding that CSS rather than HTML tables was a “best practice”, and the industry latched on to the idea.
    CSS is great for styling, but as far as layout, folks have been designing great-looking sites for years using HTML tables in all sorts of ways. Just because an HTML table was originally meant for tabular data,as you say, who cares if creatives find other uses for them? For instance,slicing up large images and putting them in a table to make for a faster download worked wonderfully in the days before high-speed connections, and it’s still a good creative use today.
    My point is, CSS definitely answers a need, making it a whole lot easier when it comes to making site-wide changes to design styles.
    But CSS tables neither answer a need nor make it any easier. So why make CSS tables the standard or “best Practice”? HTML tables are standards compliant and have been working fine for years, and if something ain’t broke, why “fix” it? :-)

    • Dan Rodgers, 27 July 2010

      Joe, I suggest you take a look at one of the millions of articles out there that compares the adv and disadv of table-based layout and css-based layout, like this one: http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/

      • Joe, 28 July 2010

        Thanks for the link, Dan! (Not that I haven’t been keeping up with this issue.) But I read the whole article you suggested and all 86 comments. If you’ve done the same, you’d see that not all are in agreement with the author. Indeed,some flatly refute the author’s findings!

        But the topic of the article doesn’t really apply to what I do. The article discusses Table-based layouts vs. CSS-based layouts. I don’t limit myself to either/or. Rather, I use a combination of both. My site initially is based on CSS layers, but I have no problem with throwing an HTML table within one of those many div tagged layers! It works for me, despite what the purists think. Both CSS and HTML have their virtues :-)

    • Micah, 27 July 2010

      Have to agree. Tables are widely used for numerous reasons for design purposes. As an enterprise application developer tables are primarily to accomodate clients using an assortment of browser types and versions. Assuming you can only go with a purse CSS just wouldn’t work for real world corporate applications. For personal sites, blogs, primary company web site, etc. it is great and encouraged.

    • Mustafa Quilon, 28 July 2010

      Wow! which year are you living in? :)

    • Bram, 28 July 2010

      ………? CSS tables and HTML tables are the same but the first being styled with CSS. Am I right?

      • Bram, 28 July 2010

        Sorry, forgot! That question is for Joe… please elaborate…

  • Jackson, 26 July 2010

    Great article. From your point of view, would u use tables to layout product lists in ecommerce? I been a CSS purist but have always been curious about the correct circumstance to use tables in. By product lists I mean a product list page like the following: babysgotstyle.com.au/catalog/fashion-jackets-jumpers-c-1_16.html?osCsid=09210953c77602b36dc37708e3e47513 I would still use div based layouts for product detail pages but curious to know your point of view here.

  • Devin Walker, 26 July 2010

    At minimum you should have alternate rows colored when displaying more than 5-8+ rows.

  • Jaran Nilsen, 27 July 2010

    Excellent post. You focus on a key issue with many of today’s web developers. “Tables are evil” – yes they are for general site layout, but for tabular data it’s the DIVs which are evil. I wonder how many of these DIV-loving table designers who have actually tried maintaining a site with large DIV-based tabular data views…

  • Andy, 27 July 2010

    Nice write up! It still astonishes me the number of times I see tables being wrongly used as a layout tool rather than to display tabular data; and when tables should be used, not!

    Pleased to see that your comments form hasn’t committed the crime of using a table for layout. I see this practice far too often.

  • WebCreationUK, 27 July 2010

    Just looking for something like this, related to tables, right on time mate! :)

  • Web Design Portfolio, 27 July 2010

    tables? in this day and age?

  • Stephan Wehner, 27 July 2010

    I find it quite difficult to use tables when some cells
    contain a lot of text. Sometimes it happens that the browser
    enlarges the table so that it doesn’t fit in its container anymore. – Stephan

  • Gareth Poole, 27 July 2010

    Good wednesday morning read. Pretty thankful I came to web dev after the table layout era, but of course, tables for tabular data always.

  • madshock, 28 July 2010

    I think tables and tableless is a great debate regarding html and css. Some designers are shifting to tableless but still tables remains essential. I guess, this really depends on the point of view of the designer. Am I a bit oldschool for still using tables and not really embracing the tableless crusade? Anyway, thank for the great write up!

    • Bram, 28 July 2010

      And what a great table you have on your website.. ;)

  • Ren, 29 July 2010

    Good post and some nice table styling inspiration. I’m like Joe and still use tables for some parts of my corporate layouts that are expected to work with branches still running IE6. I have yet to find a relatively easy and reliable way to style complex forms using just CSS.

  • Gen, 29 July 2010

    Thanks,,

    It look very good and professional, thanks for sharing…

  • ally mac tyana, 29 October 2010

    Male stars don’t get paid sh*t. Your real pay is being able to do it with hot chix. ; )

  • Megha, 13 December 2010

    If you want to know something useful about tables and UI best practices this post will really prove to be a helpful one. I have bookmarked it for future use. Now its your turn.

  • Marcelina Sarratt, 25 January 2011

    Nice post. I was checking continuously this blog and I am impressed! Extremely useful info specially the last part :) I care for such information much. I was seeking this particular information for a long time. Thank you and best of luck.

  • Ricardo, 30 March 2012

    Excellent article. Thanks for sharing

search form
 
image description image description