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 Tag-Soup
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).
Original Site (3 Column Fluid Table-Based)
Normal Page View.
Showing Layout Highlighting of Table, Cells, and Block-level elements.
New Site (3 Column Fluid Table-less)
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.)
Site with No Style (3 Column Fluid Tables)
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.)
Presentation Flexibility
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:
3-Column Layout Transformed into a 2-Column 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.
~Nicole
Enlightening I must say… really good job explaining the reasons why table-less design is here to stay.
useful !
I’ve been designing sites for years now and have not fully been convinced of the advantages of tableless design – using CSS yes, but tabless design, I’m still not convinced.
Many of your arguments are valid, but in many I could argue in opposition. Here are some reasons why I think using tables is better.
1. There are billions of pages out there with tables in them. I don’t think, in the foreseeable future, that browsers will ever stop reading tables.
2. Table design is faster. And this is not just my opion, I work for a company that designs hundreds of websites a month. I asked all the web developers what was the fastest way to design web pages, with tables or without. All of them said it was faster with tables. Faster development time = cost savings.
3. Table design is easier to maintain. When a page is created with divs instead of tables it is almost impossible to open up the source of that page and know what is going on without looking at the style sheet to see what the properties of the div are. With tables I can open up the source of a page and see exatcly what is going on as far as the layout is concerned. When developers have to make changes to a site that they didn’t create, with a fairly complex layout, it takes a signifigant amount of time just figuring out the layout – wasted time and wasted money. When a tabled layout would save more time and thus money.
4. I am a SEO by profession and I can tell you that tabless design has very little impact on SEO. The most important thing in SEO is link popularity or getting backinks for your site.
I do appreciate your blog, because I was looking for more solid reasons for changing over to tableless design. Unfortunately, not persuasive enough for me.
@Adam
You have brought up most of the expected arguments against tableless design. I’ll respond briefly to each.
You said in 1 that browsers won’t stop reading tables. Of course they won’t, but that doesn’t mean that it’s correct to use them.
In 2 you said that the creation of table based designs goes faster and saves on development cost. In order for that to be wholly accurate, you have to go based on the assumption that the person creating the sites is not truly proficient in CSS tableless design. For people not accustomed to designing tableless – it only makes sense that it will take them longer to do. There are, of course, quite a lot of arguments and articles online that discuss whether or not someone who cannot or does not design using tableless layouts can truly call themselves a web designer.
In 3, you talk about ease of maintenance and say that table designs are easier to maintain. Again, that is the exact same issue as in number 2. People who truly know CSS tableless design will be able to edit and maintain a tableless layout with ease.
And finally, in 4 you talk about SEO with tableless design having little impact. I never stated that good content that will gain you quality backlinks is not important. But there -is- a small but noticeable impact of having a faster loading page with a higher text to code ratio. Both those things are extremely likely in a tableless design. Every little bit helps.
While I’m sorry you don’t find my arguments persuasive, I simply cannot say that you have taken a true look at it from an open perspective. Overall, your arguments are all based around how it would be if you continued to primarily have table based coders developing. That isn’t the idea. The idea is that people who create sites with table based designs aren’t coding properly. It’s non-standard, its not accessible, and it’s not as easy to make global changes on a site, offer alternative styles, and so on.
Here in the U.S. (as well as many other countries) our government websites are required to be up to spec standards and accessible. There are no two ways about it, a table based layout is (99.9% of the time) not going to be easily made accessible to someone reading via a screen reader or braille device. Americans who do not have the skills and knowhow in CSS tableless design are essentially setting themselves up for a path that never includes working on any government level website, or any site of a organization that receives any government funding at all.
~Nicole
Well I have to say to Adam that I have been researching this “tableless” concept for some time now and this week I took the jump. I converted one of my personal websites to tableless, and now I am thinking I will be slowly converting all of them to tableless.
It makes perfect sense that tableless would be helpful on SEO, or sense to anyone who understands how spiders crawl your website. Less “junk” to filter for the spider to determine what is content and what is not. That is well known knowledge and through my table designs I am very aware of this and try to keep the code at a minimum. I know designers that place table in table within more tables and I complain every time!
I thought going tableless was going to take more time, and it did at the beginning. It takes longer to get the basic design worked out (say your index), but working on the inner pages after you have the whole design layout working is faster and simpler. So it takes more time on the design concept, who cares. Professional web designers who understand the value of their time realize the advantages and also value to the customer (ie you charge a little more for standards).
Now I understand that the company you work for designs “hundreds of website a month” so perhaps tableless is not the way to go for your company, at that volume I am sure standards are less important than volume. All browsers read tables, this is true, but they do not read them all the same. If you check your designs in multiple browser platforms (which is greatly recommended to any designer) then you already know this.
The greatest advantage to tableless and css is the consistency between browsers and from one web page to the other. To many clients serious about their web presence that is extremely important and well worth a few extra bucks towards their investment. Just being a web farm will not be good enough in the future.
Nicole, you are right about screen reader devices. I have 4 web clients who are blind and I have really worked hard on making their sites easy for them to navigate, I would say that I have become a pro in the blind accessibility websites. And I am very excited to switch these clients to tableless to offer an even better experience for those people.
Back to Adam, I really recommend that in your spare time aware from the design farm you really work on doing a tableless website to at least have that knowledge. I have seen several web designer positions listed in the paper lately and that all say “must have tableless design experience”, even if it is something you do not believe in, as a web designer you need to have that ability when it is called upon to stay in the race. FrontPage has made everyone a designer, you should shoot for something more than what any average Joe can do with a few hundred dollars invested in a program.
Professional web designers need to pick up the pace and stop offering up these “ugly sites”, I see too many ugly and inconsistent sites that I think is done by a beginner in FrontPage and scroll to the bottom and see it was done by a professional that this poor client actually paid.
Don’t let FrontPage put you out of a job 🙂
Chad
What I’ve been looking for. Thanks!
I know that tables ares dead and recently really began to use CSS, and it really is super cool. The major problem is that you have to really resize your tables and the like, before stuff gets done. But CSS: you can change the entire layout by just adding a few lines of code to you stylesheet. Thing is, I’m having to learn this too late, someone should ahve said something earlier.
It’s kinda tough getting contents to square out like tables do, but I know, eventually I will get thru this.
@DT
I can completely understand the frustration that you are feeling. About 8 or more years ago I was making websites that used tables. Why? I didn’t know that there was another way to do it. When I found out about CSS a year or two after, I spent the next several years piecing together bits and pieces of information scattered throughout the internet on how to create sites with CSS instead. Unfortunately, at that time (and largely still today), the information was never to be found in one place. You had to find little nuggets of information where you could.
Thankfully it’s gotten better today. We still need more resources that will show you everything you need to know in one place, but at least there are some that give you a good amount in one spot. What I dislike is that many high schools and colleges are still teaching table-based design to their students – continuing to put students at a disadvantage. I feel for these students who pay money to learn from someone, then find out later that they paid to be taught the wrong way, and now (if they want to be successful) have to un-learn everything they know and start over.
Good luck on your journey learning CSS – the resources are much more available today.
~Nicole
Hi! its extremely useful. I’m a web developer ; a mom now back to work and stuggling to get on to with tableless designs. Helpful articles here. Searching for tools to develop css based designs.
Hi!
Its really very useful. I really appereciate your hardwork for this wonderful article. As far as coding is concerned “ITS REALLY OPTIMIZED” however takes much of designer time.
I have been a full-time professional web developer for 11 years now. I make over six figures a year and I too, like Adam, work in a production environment where cost and time are most important. I in fact head up the department. I have seen it all: design trends, browser wars, standards, and hype.
Does anyone remember the industry wide push against Frameless designs?! That I did agree with. However, “Tableless” and how it is being interpreted is where I have an issue.
One thing about Tableless layouts I would like to point out to all, is that it is okay to use tables. “Tableless” does not mean do not use any them in your pages completely. The term has been wildly misconstrued.
W3C, when they announced this to the world, meant that designers should not use tables as part of the design of a site… meaning its look and feel; such as the main headers, columns, and footers of your design and non-tabular content. If you are displaying results from a database (enter the term Tabular Data) then it is most appropriate to use tables. In this case, it would be completely wrong to use divs to “layout” results in lieu of how table rows and cells can.
Using tables as part of your cool web dude tool bag to display data is fine, meaning Tabular Data. It is still up to the designer whether you want to use tables to layout an entire page. It is frowned upon by the stuffy W3C, give me a break. They certainly do not get a gold medal from me for design and layout.
I have personally embraced this technique and have tried it on a few enterprise sites that I’m developing and have launched recently. I like it… it is a little slower to deploy in some cases and much faster in others, but ultimately you have way more control over your layouts. Though when I need to display results from a database, give me tables every time.
I would caution the use only because of how many people are still using IE6 and FF1 vs. IE7 and FF2. If you want to go Tableless, just be sure to have access to these older browsers and not develop solely on the latest and greatest. Which of course we would all prefer.
Lastly, Tables are not going away. They are apart of the HTML standard and included in the W3C HTML 5 draft. Browsers will be supporting them for very long time. W3C is just saying know when to use them.
@Web Veteran
No negative reaction here — I completely agree with most of what you said.
There is nothing wrong with using tables. There is a LOT wrong with using tables incorrectly. Tables are for data. Period. Tables were never intended to be used for layout. When used for layout, they cause many problems. When used for data, as they should be, they work marvelously. This article is talking about tableless layout, but perhaps I should write one about how to use tables within content properly.
If it is a bit slower sometimes to go the completely standards route, but you nailed it when you summarized that ultimately you have more layout control. There is a learning curve to be an up-to-date web designer, and I think that anyone who is not constantly learning new techniques and perfecting their talent is phasing themselves out of the business.
I understand your desire to caution people about using tableless layout, and your reference to certain browsers. A completely standard layout can, however, be done cross-browser with little or no hacking. I have done this repeatedly with my templates because I despise hacks. Again, its just about learning curve. If you force yourself to learn how to do it properly the first time, and not be satisfied until it is working the way you want, then you will learn more than if you start searching Google for hacks the first time you hit a snag.
You are right, tables are not going away! Hopefully, what will go away eventually are designs created using tables for layout, and the designers that make them without attempting to learn more.
~Nicole
CSS 2 is difficult to learn for a HTML coder (working since 1995 🙂
Like me, but now I have seen that CSS@ once mastered is very easy, fast and easy to handle…
The basic funda is learn the basic and dont try to go too deep.
sushant shah
http://www.imediaacademy.com
@Sushant
Definitely. Always go slow when you learn something new, and get a good foundation in what you are learning. Then, once you are really strong with the basics, start playing with the advanced stuff. Pretty much the best way to learn most things.