Div or Table Layout CSS Div Table Layout?
A question I have found myself asking an awful lot lately! Just about every designer I work with now does their layouts in divs rather than the more tradditional tables. When asked why they nevery really have a decent answer!! I tell them all they are suffering from "divitis"... To me, as a programmer and some that has to deal with the most awfully formed HTML, it is not the elements you use in a page to create a design that causes the problem, its the way you use them. After all both a div and a td are block level elements, yes, a table requires more code to create but they are still block level. Some designers are even applying CSS rules to tell divs to layout as table-cell's, what is that all about??!
Replacing table layout with CSS is another thing I am slowy but surely getting sick to fucking death of. Let me put this straight:
I have built sites with tables and CSS only to have so called knowledgable designers (university educated ones at that) turn and say "Thats not CSS, thats got a table in it, CSS is divs". Like German tourists, the stupid are everywhere!
The problem for me lies in badly thought out HTML, especially when a designer knows a coder is going to have to deal with it. I regularly come across designs that are set out using absolute positioned divs but when you view the source code it is not in rendering order. IE; the header div containing the sites top strap image is actually at the bottom of the source code. Or even worse, the designs that, when you add or remove a single div, the entire page falls to bits because it was built like a house of cards!
Another VERY LARGE PROBLEM is the nestedness I find in so many pages. We all know (or at least we should) that a page can be laid out using block level elements of any kind using CSS but why do we have to have 6 levels of nestedness just to get a page that looks right. I do a lot of image to HTML / CSS conversions and NEVER go more than 3 levels of nestedness deep mostof the time only 2 deep.
Sadly I can already hear designers saying "Yeah, I can do the same layout in 1 level of nestedness". Its just not that simple is it. So as with so many things in life, a little though goes a long way!
Some of the excuses I have been given for not using tables to layout and my answers based solely on experience:
- Makes your page load faster: Bollocks, less code makes your page load faster. A browser still needs to download the 45KiB stylesheet before it can render!!!
- Lower your hosting cost: WTF????
- Make redesigns more efficient: A redesign is NEVER an efficient thing to do unless the original site was CMS based!
- Get better search engine results: Bollocks, good links, XHTML and a well though out page gets better search engine results. I've seen sites with HTML errors all over them do really well on searches
- Cross browser compatability: Bollocks, Good layout and simple elements where ever possible make for good cross browser pages! Screen readers are fucking old and dont get updated much.
- Saves design time: Clearly that chap never checks their sites in more than one browser!
Personally, I really dont care, table or div, each has their pluses and minuses!
After all is said and done: