Since I recently wrote an article on the benefits of a tableless layout, I felt it prudent to express my views on it in practical application. I personally know many many web developers who work in the industry, and whether these people have multiple clients, or a position that requires them to handle many different websites and/or pages for a company, they often find themselves lacking time to learn new technologies.
In my view, learning CSS and how to make a tableless layout can only provide you more time to learn things. The time you save in not having to update your pages manually for style changes really adds up in the long run. If you utilize that time wisely, you can have a few minutes more each week to learn something new.
Tables, by themselves, are not evil. But tables used in ways that don’t allow for accessibility are not good. A table should contain tabular data, as is their intended purpose. They should not be used to format the design features of your website. In an ideal world, your actual web page should contain your basic allowed HTML elements, your linked CSS file should hold all the style information, and any actions/responses should be handled by some sort of separate scripting (which should be linked to, but not in your page code).
Now, again, I understand that many developers just plain don’t have the time. I hold the view that you can transition a website, keep your tables for a while, and learn CSS while you are standardizing your site. The most zealous of the web design community often advocate just quickly ditching all your table layouts and creating a fully CSS based website. Well, that’s nice and all that, but it’s just simply not practical. Many web developers don’t know CSS at all, or don’t know it enough to build a fully cross-browser compatible tableless layout. They need the time and resources to learn it. Even if there are books on the market to teach someone CSS, to force people to convert their sites immediately assumes that their employers (or current client workload) allows them the time to do it all. A slower learning transition is certainly ideal, because a web developer will learn more that way than if they just grab a CSS template and transition their site with it.
So, if I don’t think that you necessarily have to go straight to a tableless layout, then what is the point you should try to reach before you ditch the tables? My answer is pretty simple – when you’ve converted everything else. When you’ve learned how to format all your text using CSS, when you’ve got an unordered list link menu instead of one with <br /> elements after each line. When your images and sizing is all controlled by CSS now. When you have, effectively, one table formatting your site, and everything else is CSS driven. Then – switching to <divs> instead of table columns is simple. Reaaaaalllly simple. It’s practically copy/paste at that point, though you may have to tinker with your floats a bit to make sure they display properly in all browsers. However, if you’ve learned everything else you needed to do to transition your site – then that shouldn’t be a huge roadblock.
I took the tablebased example from the article on why to use a tableless design, and added a few elements to make it look more like a site (granted, still relatively minimal).
A Table based site ready for transition to tableless.
You can take a look at the code and see that it contains exactly ONE table. Everything else is CSS formatted, and the page validates to XHTML 1.0 Transitional. This is the point at which you can take your site to a tableless layout with a nearly seamless transition… and that is what we are after all along. Making is easier, learning it not just copying it, is ideal.
~Nicole
