Recently Kalle asked me to write up an article on why people should stop using tables, and show a simple example of tableless design. The reason was not because he doesn’t know how to create them, nor because there are not many examples on the web right now. Mostly, the request seemed out of frustration with the many people who just like to go around preaching ‘Tables are Evil’ and can’t explain why. I’m sure you’ve met some of these folks. They are the bandwagon sort that tend to learn all the catch-phrases, and they get an overview — just enough to sound like they know everything.
Personally, I don’t know everything about web design and I don’t claim to. However, I can say that what I do know – I know very well. The other things in my field, I tend to know to varying levels. For instance, if I get really stuck on a layout issue coming from a browser bug… chances are good I’m going to drop by and see Holly and John.
So, without further ado.. let’s begin with the benefits of a tableless layout. These are only in the order that I feel they should go in, some things are more important to other people, so rank them as you will.
Tableless Layout Benefits
Forces You To Write Well-Formed Code
You cannot have a properly made tableless layout, and use improper and non-standard code. Well, let me correct that – you can (technically you can do it) but it defeats the whole purpose. When you are creating a tableless design, you should be using standards compliant code. I think that anything that makes you get into the habit of always writing clean code is a good thing.
Faster Loading Time
This is absolutely a benfit of a tableless layout, and for several reasons. First, on a fundamental level – tables load slowly. For the most part, unless you set the height and width of your table elements, all the text has to be loaded and rendered BEFORE the table sizes itself to the page. Of course, this is what so many people loved about tables isn’t it? The fact that they were so easily sizeable. The downside is how much more time they take to load.
Okay, so the solution to that loading time is to set all the values explicitly, right? So now we see another downside. Code clutter that increases loading time. First of all, just by themselves, tables take alot of code. How many <td> open and close tags does your average table based layout have? Tons. Having to set all the values explicitly only adds to the page size and loading time. There are many experiments that have been done on this topic, I’ll point you toward this one that StopDesign did on a remake of the Microsoft website from a tablebased site to a tableless layout. That remake showed a 62% file size reduction of the site, and using their average hits per month for the Microsoft site, calculated that Microsoft would be saving 924 GIGS in bandwidth per day, and 329 Terabytes of bandwidth per year. For any company that pays for bandwidth, these things are important.
Easier to Read Code
If you are using standard code, and a tableless layout, your code can be so clean that it looks practically like just regular text with a few extra symbols.
Which would you prefer?
Some clean code saying about the same.
Print Alternate Views
When you create a page using a table-layout, you are rather unfortunately locked into a certain layout. Developers who have created table-based websites, as most of us have at some point – particularly if you were in the the industry before the big tableless movement, know that you often have to create a separate printable version of your pages. This can be, needless to say, quite tiresome.
Ease of printing style control is a huge benefit with a tableless layout. You can easily create a single new printing style that applies to all your pages, instead of making them individually. While you can control all elements with this approach, the biggest key is organization of information within the page itself. Using the example, let’s assume that the display order we want all our pages to print using the following order: The page header first, the content next, the special news after that, then the link list, and then the footer. However! We still want it to display as it would normally when viewing (meaning the header at the top, the links on the left, content in the middle, news on the right, and footer at the bottom). With a table-based layout, you would have to create a new page to do that special printing organization because the print style will read your columns left to right. With a table-less layout, you are not bound by this. You can order the content in your page however you like, and still control the way it looks by the CSS only.
Take an example table based site layout, and the corresponding table-less layout (yes, I know they aren’t exactly the same. Some padding and typography, but those can be sized easily. I’m mostly concerned with true layout for now).
Normal Page View.
Showing Layout Highlighting of Table, Cells, and Block-level elements.
Normal Page View.
Showing Layout Highlighting of Block-level elements.
Now, these two layouts are nearly exact (and could be exact if I had spent more time tweaking fonts and sizing) but when you remove the style from these pages you can see a huge difference. The Tableless layout will stay in the same format, pagewise, which makes it not so good for printing, and definitely not good for control of layout. However, for the tableless layout, you’ll see that we have exactly what we wanted — the header, then the main content, then the important news, followed by the links, then the footer. (To view the site with no style, in Firefox, click View -> Page Style -> No Style.)
No Style Page View – Tables.
No Style Page View – Tableless
As you can tell, removing the style makes the second page perfect for printing. Also, because we can put the content in whatever order we want in the HTML, and then move the content blocks around for website viewing using CSS – we can have ultimate control over presentation.
That is very important because the clean code, and ability to alter presentation, means that your site can be viewable by someone on a small mobile phone screen, a PDA, in all text format can be perfect for someone using a text-to-speech reader, or a braille device, and since the code is clean, it is both backward compatible (with older browsers seeing mostly just the text) and forward compatible with new technologies to come. The flexibilty and organization leads to being able to create a powerful website that takes advantage of some of the possibilities with XHTML, and adding in support in your pages for microformats, or taking advantage of using RSS / ATOM feeds from your site to develop a base of regular readers.
Search Engine Optimization
Due to the fact that you can organize your most important content at the top of your page, without affecting the layout, your page can be better optimized for search engines. They can more clearly find common words throughout your document without having to filter through code. Search engines prioritize websites that have a higher content to code ratio, so putting all your style elements into your external CSS stylesheet makes your site highly content based to a search engine. Tableless layouts, as previously mentioned, decrease page size and loading time – another bonus to search engines. Additionally, being able to take advantage of the RSS/ATOM feeds (see the section directly above) will aid you in some new technology for site indexing as used by all search engines called ROR. (ROR is an XML format summary of your website, like a sitemap, that search engines can access for additional information about your website.)
Making changes to a CSS based Tableless layout is simple. You alter the CSS and change the look of the whole site. The affects cascade through all the pages on your website, and eliminate the need for manually updating many pages.
Here is an example of what a couple of small changes to just a few lines of the existing tableless CSS code can do to a layout:
For one of the best known examples of how powerful presentation can be, you can visit the CSS Zen Garden and navigate through the ‘Select a Design’ links to see the differences. Each of the different designs uses exactly the same HTML file content. The only thing that changes is the CSS file for each one.
Selling Yourself On Standards
Sometimes knowing how to code for standards, and create flexible tableless layouts is not enough. There are some web designers who meet with difficulties from their management. Most often those difficulties are rooted in the management being unaware of the benefits of using tableless content and CSS driven layout.
If you want to design for standards, but you work for a company that is not very forward-thinking in allowing you the time to work on the changes — try this: Make them think about their pocket-book. Point out the cost saving benefits.
For instance, try grabbing a single page of existing code. Clean it up to standards. Compare the page size to before (including image optimization), and count the difference in bytes saved. Multiply that across the number of site pages, and the number of days per month. Then explain to them the amount of bandwidth cost saved monthly if this was done across the whole site. If that isn’t enough, show them how quickly you can make changes to a website once it is CSS driven, and push the idea that you will be able to change the site more rapidly when there are needed updates, and you will have more time to focus on adding in new functionality to the site – instead of spending your time doing maintenance.
Hopefully, this little summary will serve as a way to get you started on understanding why to use a tableless layout, what the benefits are, and I you can easily take a look at Layout Gala and download just 1, or all 40 of the tableless layout examples to get you started. However, the best step toward moving to a tableless design is to slowly move your website toward a standard compliant version first, before you get rid of the tables. To get to that point, study as much on CSS as you can, read through the articles here and elsewhere on the web, and moving from table layouts to tableless will be just a matter of time.