Home > Articles > Why You Shouldn't Use Tables
Why You Shouldn't Use Tables
Written on Feb 14th, 2010 at 7:13pm
A few years ago, the table element was all the rage. Using tables (and the associated child elements), you could develop any website, with a nice looking layout, with the greatest of ease. All of a sudden, everyone's site was developed using tables, and I'll admit, it was a lot easier to set them up as opposed to playing around with <div>s.
This doesn't mean tables should be used to design your page. Here are just a few reasons why you shouldn't use tables for design purposes:
Tables aren't syntactically correct
HTML has a bunch of tags to use, each one telling the browser something different. While the <em> and <var> elements render the same way (italicized), screen readers, search engines, and the like don't look at how they look - they look at what they mean. Tables were meant for data - so is your entire site nothing but data?
Tables require more space
In order to get the perfect spacing on your webpage, you will need to have lots of rows and columns to take up empty space, and those characters add up! There are many times when I find a site and determine that by converting the table layout to proper CSS, I can reduce page sizes by 25% or more. These savings are transferred over to the viewers of these sites, which brings me to my next point:
Tables are slow loading
This point is actually two-fold. Firstly, you can download a 25kB page much quicker than, say, a 75kB page. While many people have internet connections that make this difference seem like nothing, there are still people out there who are still on 56k connections, and they notice the extra download time needed.
Secondly, for obvious reasons a browser can't render the contents of a page until it's downloaded. Given that tables require more download time, their rendering is slowed down, as well.
Tables are hard to read
If you look in the source code of any page, things should be pretty easy to read. Now take a look at a simple sample table, from our HTML tutorial:
| Language | Year Learned |
|---|---|
| QBasic | 2000 |
| Visual Basic | 2001 |
| C++ | 2001 |
| Java | 2002 |
| Prolog | 2008 |
| Ruby | 2008 |
| Python | 2007 |
| Cache | 2008 |
Tables don't get much simpler than this - and yet it's still hard to read in the source! And if you can't read something, well...
Tables are hard to edit
If I want to edit a piece of data in the above table, it's going to be a royal pain figuring out where exactly I want to add or remove something. And, if I wanted to add a column in between the two existing ones? Forget it! It would be an excercise in aggravation. Fortunately, we won't run into this problem too often with strict data - but if you're talking about a website that gets updated on a regular basis (and would most likely require more than two columns to achieve the proper format)...ouch...my head hurts...
Tables are hard to print
What happens when you print a spreadsheet which has one column too many to fit on a page? The same thing happens with tables. Why cause aggravation for users who like printing your material?
Don't get me wrong - tables certainly have their use - you just need to know what that use is first! Keep your tables to relevent data, and you won't have any complaints from your users.
Comment on this page:
Comments
No one has commented on this article yet. You can be the first!