Table Still Kicks CSS’s Behind
So I spend a couple of hours wrestling with CSS, FF, IE, and Safari, trying to get my floats to clear and still get my CSS based rounded corners, because I’m such a big believer in standards, semantic markup, and separation of presentation and content. It turns out to be a sad comedy of sorts, with one brand of browser invariably throwing up on whatever I try.
I get sick of it, go do some other things, and return a couple of hours later. I’m staring at what I’m trying to do, and it occurs to me that table based positioning would knock it out in about 30 seconds. Sure enough, 5 minutes later, I have a table positioning everything exactly as I want and all of the CSS hacks and trickery gone.
So I’m heeding Dustin’s advice and going with the Web 1.0 pimped out retro technique. Hey, I think I’ll even use the <big> tag; I hadn’t heard of that one before.
CSS is great, but I still don’t get why it doesn’t include a simple table based positioning scheme that troglodytes like me can wrap our heads around and maintain semantic hipness. I appreciate the semantic markup arguments, but when the alternatives are spending 5 minutes versus hours of per-browser-css-hack, I’m going with the Web 1.0 .
Manage your expenses via Email, SMS, Twitter, Voice (Jott: Call and say your expense), IM (Yahoo, AIM, MSN), or Web.
“CSS is great, but I still don’t get why it doesn’t include a simple table based positioning scheme that troglodytes like me can wrap our heads around and maintain semantic hipness” - it does. It’s called display: table, it’s been in CSS 2 for very nearly ten years, and of course IE doesn’t support it so it’s completely useless.
Oh, the humanity!
I remember table-based layout from back in the VGX days, and I remember how it made Baby Jesus cry. We still use tables for HTML email layout, and our developers (all of whom learned tables after CSS) curse them daily.
That said, tables have their place. Namely, tabular data. If you have a list of things, and each one has the same N parts in the same order, then it makes perfect sense to represent them as a table.
CSS and divs offer great flexibility, but they are not user friendly. People who curse tables, simply don’t know how to use them. I wouldn’t curse CSS positioning, even though it’s full of bugs and not just on the browser level. It is possible to mold and shape divs into great designs, though anyone who says its easy is selling something. A combination of css and tables is the best approach - capitalizes on the simplicity and stability of tables with some powerful css features.
The advertised benefits of pure CSS are overinflated.
A layout table used properly will not hurt accessibility. - I have double checked with a screen reader. The key to accessibility is special markup and in-page navigation, not divs.
Owners of online picture galleries probably shouldn’t worry too much about blind users. As they probably shouldn’t worry too much about cell phones.
A div with 10k of content will not display until it fully loads just like a table. - Unless a container has predefined dimensions, it will always behave this way, regardless of being a div or a table.
If tables are styled with classes and ids and not inline, they share the same css acceleration as divs.
An html document full of cryptic divs nested in seven layers is hardly cleaner or neater than tables. In any case tables are more self documenting.
‘tr’ and ‘td’ tags take less space than div + bloated class name + bloated id. You might eliminate some tags but your file will not be smaller.
Tables require less css because they do what we want by default. This means that the first time the page loads, which is the most important time, your page will load faster with tables.
Since the bulk of the a page is images, the two above arguments are not even relevant. Reducing images is the key to speed up, not divs.
Cell phones linearize tables quite well. Divs offer more control over the order in which the content will be presented, but the default order of table cells is usually quite acceptable. And it is definitely possible to combine divs with tables for greater control.
Thanks to css the days of font tags, nested tables and spacer images are gone for ever, therefore it is not fair to compare tables without css to divs with css. Tables with css have most of the benefits of divs and some benefits which divs don’t have.
Browser support for CSS is horrible. The main reason being inconstancies with CSS itself. Main culprits are the W3C box model, which doesn’t make sense and makes percentage widths for divs with borders meaningless, and margins collapsing which doesn’t make sense either and impossible to toggle on/off. CSS is very raw to this day. I think that IE is quite right in refusing to support some of its dumber mistakes.
CSS positioning is raw, dirty and bug ridden. However CSS styling really makes tables (and everything else) better. So it is a good thing after all.
So soup-up html with CSS but don’t get too cocky about CSS positioning - it is not ready for prime time yet.