Three good reasons for web designers to use tables
With the rise of CSS and standards, the mere mention of the word ‘tables’ amongst web designers is likely to bring a reaction as if you just swore to your grandmother. For some reason the backlash towards table-based design - which ten years ago was the defacto standard way of designing complex page layouts - has become so passionately fought over that web designers can forget that tables still play an important role in modern web design. Here are three examples:
1. HTML email marketing
Look at the source code of any HTML-based marketing email and you will see tables galore. This is simply because CSS is not supported very well by many of the popular email clients. Campaign Monitor’s guide to CSS support in email brilliantly documents the level of CSS support amongst all popular email clients. A quick scan of their research indicates that Outlook 2007 and Gmail are amongst the worst in terms of CSS support.
The added complication for web designers working with email is that the popular webmail clients render email slightly differently when used with different Internet browsers. For instance, I’ve tested emails that have looked slightly differently in Hotmail on Firefox than when viewed in Hotmail on Internet Explorer. This creates endless combinations of compatibility testing for the designer.
The end result is that designers, like it or not, have no choice but to rely on good old fashioned table-based layouts when designing HTML marketing emails.
2. Mobile web design
With the emergence of the iPhone and its innovative way of presenting web pages, mobile web has begun to realise its potential to become the hottest show in web designer town. If it isn’t it already, it’s the next big thing!
However, the iPhone currently accounts for only a 5 per cent share of the global smartphone market and a paltry 0.6 per cent share of the global mobile phone market. The rest of the market is using a diverse range of devices with varied web capabilities.
In a recent article for .net magazine, Brian Fling of Fling Media revealed to the world that:
"...inside the [mobile web] community, we all know using tables is the best way to create a consistent design across multiple devices... It's one of the dirty secrets to mobile web design that we may not like, but at the end of the day it gets the job done."
Whilst leading-edge devices such as the iPhone are allowing designers to develop for mobile web much in the same way as they do for desktop browsers, the truth is if you want to reach the widest possible audience it’s tables all the way.
3. Tabular data
With all this should-we/shouldn’t-we debate surrounding the use of tables in web design, it’s easy to forget that tables actually serve a very valid and useful purpose in a web designers’ arsenal of weaponry - for tabular data.
Honestly, I’ve seen examples of tables for tabular data being recreated using DIV and SPAN tags. Some people are so passionately anti-tables that they won’t even use them for the purpose they were designed for, and the purpose for which they are the best tool available. Simple rule: when presenting tabular data, use tables.
What's your stance on tables in web design?
Don’t get me wrong, I’m a staunch supporter of standards-based web design and banished table layouts from my designs many years ago. I just believe that the anti-table sentiment is disproportionately passionate at times. Even Brian Fling seems to apologetically admit to the mobile web community having to resort to tables. Using tables doesn’t make an individual any lesser of a web designer and certainly in the examples I’ve provided above, tables offer the best method to get the job done.
Do you use tables in any of your designs? Have you had any experience with email marketing or mobile web? Are you a vehement anti-table evangelist? Share your thoughts in the comments below.
10 responses
Brian Yerkes responded on with…
Nice post Aaron. It’s nice to see someone actually being smart about the css versus tables debacle and actually accepting that tables should still be used for certain things. I’ve discussed this in forums with many other web designers, and a lot of them seem to be so ridiculous about being anti-tables. Beginner web designers go on there and ask for help with their code, and other designers get on their and simply reply with “don’t use tables. get that out of your code”, without actually providing any help. That’s the problem with some in our industry, just like you’ve highlighted in this post.
I learned about Outlook 07 / Email newsletter the hard way…it’s rendering machine is from the early internet days….such a mess…especially as it doesn’t support background images.
Sites like CSS Globe (i think that’s the image you have in your post) with free source like “Tablecloth” are great and extremely useful. http://cssglobe.com/lab/tablecloth/
Oh, by the way, in your comment form, Google Toolbar makes your “Name” and “Mail” field yellow, and because your css makes the text grey, you can barely see what you are typing into these two fields when making a comment.
Tracey Grady responded on with…
Sitepoint published a guide on HTML email marketing a few weeks back - it’s worth a look for some more information on using tables, and compatibility with various email readers.
Using tables for email marketing and mobile web design: it seems that tables are the necessary evil for these formats because there’s no better option which is widely supported (yet).
Lucinda responded on with…
As Brian mentions I also banished tables from conventional web design years ago, however as your article states they still certainly have their uses. i still use tables for emailers and regularly for tabular data - there I said it!
kristarella responded on with…
CSS all the way… unless you’re presenting tabular data, then tables are beautiful!
Rands In Repose uses tables really nicely, shame he doesn’t use other good markup like headings, but his table presentation is sweet.
I don’t know where I stand on phone and email… my phone doesn’t use the page’s CSS, but it copes ok with nice semantic pages. I didn’t realise email wasn’t as standard when it comes to html presentation.
Paul responded on with…
Unfortunately its a case of still having to use tables for certain applications, rather than it being the correct application of technology, and the more we let certain applications dictate the technology used, the worse off we are. Designing for the iPhone should allows us to use CSS and HTML, it’s more Apple’s fault that we can’t, and as developers we should be demanding standards compliant devices. As for emails, the same should apply - it’s the devices failing to properly render the content. It’s for these reasons that cross platform / cross device rendering still remains an elusive pipe dream, and considering that the mobile internet is here to stay, it’s a poor reflection on the large companies who on one hand tell us they support standards, and on the other use their own quick fixes to get browser products out the door. Sigh.
Joe Clark responded on with…
HTML E-mail enables phishing. You seem to be advocating the most practicable method of developing HTML E-mail messages that could defraud their recipients. (Just a guess – and this is off-topic – but you probably also top-post.)
It’s fine for you to trot out statistics about the iPhone, but you conveniently ignore the prevalence of Opera, a standards-compliant browser that doesn’t need tables.
Nathan responded on with…
Not using tables for tabular data is extremely hypocritical. The whole reason people became such anti-table enthusiasts was for the sake of semantics and standards. Well, newsflash, tables are the most semantic and standards-compliant thing around when it comes to tabular data. They aren’t deprecated, for crying out loud! Just use them properly.
The trend seems to be that designers are simply jumping on the CSS bandwagon, not because CSS is better, but because they are afraid of being ridiculed, and they don’t really understand whats involved. (Note: This is a generalization, so please don’t be offended, anyone. ;) )
(Discounting tabular data, I suppose I could be labeled as somewhat of a vehement “anti-table evangelist.” ;) )
Aaron responded on with…
Brian, Tracy and Lucinda - Thanks for the comments you posted a few weeks back. I’m really sorry I didn’t manage to respond to them personally sooner. It’s been a time consuming affair getting my business off the ground.
Brian - Yeah, Outlook 2007 is one of the worst. But believe it or not, is probably slightly better than Gmail for CSS support.
Paul - Absolutely, I don’t disagree with you there. But for people like you and me who work with this every day of the week, what can we do about it? Not a lot apart from do the best we can with the tools we have and try and create beautiful work… with tables.
Joe - Not quite sure what you’re trying to get at - the purpose of my post is not to advocate anything. I appreciate the history of email and the controversy surrounding HTML in emails, but whether we like it or not, HTML email marketing is here to stay. As web designers, we have to work with that.
Nathan - So you’re one of these anti-table evangelists? ;) Thanks for sharing your thoughts. I completely agree: in a previous job I had to fix someone’s handiwork who’d used DIVs and SPANs for tabular data. It looked fine in our browser at work, but as soon as you viewed the page in anything less than 1600 pixel wide window, it broke! Badly!
Annette responded on with…
It was really interesting to read your post. I am a graphic/website designer who has been designing website for around 12 years and obviously started with tables. Today I still use tables (aagh!!), however I use style sheets and my navigation is all css styled. I use very simplistic tables, I don’t nest very much at all. I have dabbled with full css layouts on and off but always tend to go back to what I know, as it’s quicker and I am confident that it will view how I want it to in most browsers. I always have a heavy workload so haven’t had the time to put into developing those skills but I am starting to feel that I am inferior because I’m not on the full css bandwagon.
Aaron responded on with…
Hi Annette - thanks for sharing your views. Listen, I always take the approach that ‘some’ is better than ‘none’. I think you realise that a standards-based approach is the way to go, and you’ve taken the first steps into achieving that by developing your CSS skills etc. If your sites look good and your clients are happy then you’ve got your priorities right.
Comments are closed
Responses for this article have now been disabled. You can still email me directly through the contact form.