Language
Table free pure CSS layouts
Submitted by Aaron Hawkins on Mon, 12/08/2008 - 18:40
Tables are not evil. They do have a purpose within standards based web design (for the display of tabular data); however they should never be used to create the main layout of an html page (or a Drupal theme for that matter). I never, ever, build table based sites, and I won’t edit or fix them either. (Note: I do convert table based themes to CSS based themes.)
To really understand why tables should never be used you really have to get into the actual code that makes up a table. In its simplest form a table can be created as follows:
<table>
<tr><td>Some content</td>
</tr>
</table>
<tr><td>Some content</td>
</tr>
</table>
This is the simplest you can make a table. It doesn’t look so bad at first, but remember this code all adds up to one simple box. Once you try adding in other sections, for example a sidebar, you start creating a mess of html tags that you will be hard pressed to untangle if something goes wrong or if you need to make changes.
To achieve the same result as the code above you can use a fraction of the space and do it with divs.
<div>Some content</div>
See the difference? When you are editing code by hand (and for most dynamic Content Management Systems such as Drupal you have to hand code) having less tags to keep up with is very important.
Furthermore, tables don’t respond predictably to styling. Because the cells of a table are all part of the parent table changes to one part of the table can have unexpected consequences for the whole layout. I don’t really want to take the time to build a web page the wrong way to demonstrate, so if you want to see how nasty the results can be you’ll need to take Dreamweaver for a spin in design mode yourself.
Table based layouts are bad, and any designer that uses them should be avoided. If I sound dogmatic, it is only because the consequences of bad practices of other designers often fall in my lap when I receive web design projects to fix. It’s a nightmare to try to untangle bad code. Please, whatever you do, don’t use tables for layout.
Recent Drupal Questions
Related Content
Recent blog posts
- Mac OSX + Drush = Time saved
- Firefox search plugins for Drupal.org, Drupal API and Pixel Clever.com
- New to Drupal? A word from the wise: Never say newbie!
- Is the Adobe cs4 suite worth the upgrade?
- Thoughts for module maintainers regarding the Drupal upgrade cycle
- Let’s set the record straight: Safari is NOT the world’s best browser
- Advanced Book Blocks module with Jquery menu integration released today
- Advanced Taxonomy Blocks module for Drupal 6 released today!
- Next Release of Jquery Menu to provide integration for other Drupal modules
- So Adobe says it supports open source eh?
Benefits to the end user
I have heard the argument against tables for many years, but one thing I would like to hear are reasons why tables are bad from an end user's perspective rather than from an internal development perspective.
SEO reasons?
The development perspective is also linked to the client
I don't think that improperly used tables have much effect on the users browsing your actual site, but using tables will make your site much harder to maintain, and alter which in the end will cost the client more money.
Considering that you will pay between $50 and $90 an hour for a good theme designer that added time becomes pricey very quickly. It takes so much more time in fact, that I can rebuild an entirely new theme faster than I can remodel a table based site. (Which is why I do just that when confronted with a tabled redesign or repair.)
CSS is also capable of delivering much better looking sites than table based sites.
Take a look at www.csszengarden.com for some examples. You won't find the caliber of layout shown on csszengarden ever done with tables.
Once you master CSS you will wonder why in the hell you ever touched a tabled layout. CSS makes site alterations soooo much easier. I know because I used to use tables when I was getting started years ago.
I would still like to hear
I would still like to hear some other perspectives on this.
While I personally believe in CSS, I still find it hard to argue the benefits to clients when they are really only concerned with performance and sales. And, from their perspective, what the hell difference does it make if it's tables, CSS, or whatever else will come along. Does it work and is one a MEASURABLE benefit?
It was mentioned the time it takes to edit tables is longer? Isn't that just the limitation of the designer though? If they know what they are doing, is there no reason it wouldn't be the same time / effort?
Some measurable benefits to clients/users I think are true:
- CSS is more SEO friendly
- Lighter load to a site = faster rendering
- More reliable cross platform / browser
- Does not require the many blank or clear “spacer.gif” images needed in a table-based site to fill empty table cells, saving
bandwidth, load time, and server space.
The "better design" issue isn't measurable, and I would agrue I have seen plenty of great design in all formats. Those are just tools to execute a design.
Why would you have to "sell" best practices?
I don't see any reason anyone should have to "sell" a client on CSS. If a client is well informed chances are they will want their site to be CSS based. If they aren't informed then there is no reason they should be bothered by the developer using best practices, and it is considered best practice to use CSS by the overwhelming majority of the web development community.
In regards to speed... given that Tables require twice as many tags as CSS does it is impossible that a competent designer will be able to create both at the same speed. If you aren't hand coding you can't go very far with systems like Drupal which are template based and therefore won't display properly in Wysiwyg web tools. But really, that's not even scratching the surface. Once you start styling the page CSS leaves tables in the dust. Side by side there is no way a table based themer could keep up with a competent CSS based themer. With absolute control over the styling of the entire site all delegated to one style.css page you can do a lot more in the same amount of time. If development time is not a good argument for a client I don’t know what is (after all time is money in this business).
And again there is the issue of what CSS is capable of. Table based layouts can't achieve the same effects. They are much more limited. So what you offer to the user is also more limited... difficult to quantify, but easy notice, even for a layman.
Then of course there are the performance issues that you outlined. In my opinion those are more than sufficient arguments to side in the favor of CSS, but for me I don't even need to get into that to tip the balance. I was convinced just by the fact that CSS is faster and easier to maintain. After all, laziness is the mother of conventions.
Thanks for the feedback. I've
Thanks for the feedback. I've been working on a site audit and I've been searching for reasons to justify moving to CSS over their existing Table based technique.
I feel so used : )
All along you were playing the devil's advocate... You had me going there.
Well, I'm sure you helped my SEO for the subject by inciting the debate, so it's a win win situation in my book. Feel free to egg me on for other subject matter. Nothing like a web standards controversy to wake you up in the morning.
Post new comment