Lately, discussions seem to rage about whether to lay out your web pages using tables or divs. One side of the coin suggests all HTML related to laying out a page should use CSS, and thus the use of divs and spans to achieve this. It’s reported to be faster to render divs than tables because the browser can’t render a table until it reads the closing table tag. Using divs also typically makes the webpage’s file size smaller, which allows it to download faster, saves room on your hard drive, and it is rumored that search engines like div style pages better perhaps because of keyword density issues. If the overall html is less then the percentage of content on a page would be more, and some say that this is a benefit when dealing with search engine spiders.
On the practical side though, using divs and CSS to do your entire layout can be kludgy at best. Sure it’s fine for really simple layouts, but most layouts quickly move beyond this simplistic approach. Most of today’s browsers render CSS a little different, which sometimes results in the need for browser specific CSS kludges. Also, with a tableless layout, you often have to resort to odd hacks to make things work that people took for granted with tables such as the so-called faux columns and sliding door hacks. Complicate this with browser differences, and it can quickly end up looking like a nice bowl of spaghetti.
In fairness, CSS layouts can do things that tables cannot. Floating elements are really cool, but come with their own set of problems; For example, try to float 9 different elements with varying heights so that it ends up a 3×3 grid. Tables did this without a second thought. Without tables, you have to add an invisible span so that the next “row” actually drops all the way without getting hung up on a shorter element. Height parameters, in this case, just make a mess because they tend to leave way too much whitespace.
In theory, CSS should be used for all layouts. In practice, it’s sometimes way more of a pain than it should be.
Let me give you another example. I had a set of links sitting next to each other horizontally in a menu bar. I wanted a small form that consisted of a username and password box to sit on that same menu bar so that it all looked nice and level. For 3 hours, I played with tons of different ways to do with CSS, but ran into problem after problem. I tried floating left and right, but it wouldn’t line up with the menu links. I tried using various other html elements like putting both the links and the form into their own divs and using the divs padding, margin, positioning, etc to make them line up, but Firefox and Internet Explorer kept putting the two in different positions so making it look right in IE made Firefox screw up, etc. I could have put conditional CSS code for IE, but I’m stubborn and wanted to make it work without resorting to kludgy CSS. Eventually, I gave up and made a 2 cell table with 1 row and set the form to 0 pixel margin and padding and it worked fine in both browsers. The table solution took me all of 5 minutes. The CSS solution was not resolved after 2-3 hours.
I agree with the purists that all layouts should be rendered using CSS, but CSS isn’t practical for all layout situations yet. Tables, while seemingly archaic, are handled far closer to the same on Firefox and IE, which makes them more appealing in the cases where CSS falls short.
For the time being, I’m going to continue to learn new ways to deal with CSS shortcomings, but I’m not ready to abandon my old friend, the HTML table.
