You are invited to Log in or Register a free Frihost Account!

CSS And Tables: The Hype And The Trends

Here's some food for thought for all those out there who continually malign the use of HTML tables to design web sites. I think in today's environment of tree-hugging, think-of-the-children, web standards puritanism, this guy's got a real pair of kahunas to write this article. Hats off to him!

CSS And Tables: The Hype And The Trends
CSS makes my life easier, my source would look much more smaller and organise compare to before makes all the loading faster rather than loading the codes over and over again on every page
CSS development has a much higher barrier to entry than table based design

While comparing table based design to CSS based design, the syntax of CSS, for sure, turns out to be is pretty easy. Nobody in their right mind would argue that you need too be a rocket scientist to learn CSS. Nevertheless, some of the concepts can be quite tricky to assimilate.

Continuing in the same spirit it is true that there are so many bugs, even the "experts" find themselves spending an inordinate amount of time bug fixing. For a novice this must be extremely frustrating. Not knowing if the problem is down to your misunderstanding of CSS or some obscure browser bug.

Perhaps this is why many people see web standards as "Ivory Tower" and why many web standards advocates come across as having a sense of superiority and a zealous attitude towards web design.
I've been saying this for years. Rolling Eyes

Plus, there's no cajones involved on the internet - I mean, c'mon - the worst that's going to happen is that someone will fire off an angry email.
I don't know about that whole entry-level/ bug fixing argument.
When I decided to learn to build web-pages, I started with CSS. Never bothered with table-based layouts. And if you code right in the first place, there's not a lot of bug-fixing.
I disagree with most of what was said in the article. Perfectly interesting article, but kind of seems like a cop-out. It's the old, let's do it like this, because this is how we've always done it argument.
What's wrong with tables? Nothing, I guess. But what's right with them?
But I can do everything with a CSS, that you can do with a table. ANd it takes less time. ANd I don't have to redo it on every page. And when it's time to change 3 details on every page, it takes me 10 minutes. WHat about you?
What about me? I use CSS extensively. Just because I'm not a diehard proponent of tableless design doesn't mean I don't use CSS at all.

And if you code right in the first place, there's not a lot of bug-fixing.

*chuckle* With all due respect, that's an exaggeration. Even if you if you use doctype switching to force IE into standards compliant mode, you're going to be faced with a swarm of CSS bugs unless you settle for the most rudimentary of designs and you don't care about cross-browser compatibility.

But I can do everything with a CSS, that you can do with a table.

Oh yeah? I made the following challenge on another thread and there were no takers.

Try making a 3 column tableless design that runs the full height of the browser viewport regardless of how much content, has a header and a footer and... AND... (the first part was easy, now comes the kicker)... has borders around all the columns AND has a space in between the borders simulating cellspacing in table design. Oh and of course it has to look pixel-perfect in IE, Firefox and Opera. Yeah sure, you may be able to pull it off but you'll definitely have second thoughts about how well tableless designs match up to the use of tables.

Care to give it a whirl, riv?
Well, you know CSS made your code simpler than ever, you dont have to aligning and table-ing your layout
the CSS made the layout!!!

moreover, you even can HACK-ed the layout......
although its not the right use of code

it, simply, simplify our life

2000 pages in my site and if I start disliking the background, I just change that in my single CSS file. Try to do that with tables.
I want my Navbar to the right vertically and not on top horizontally anymore and I change my ONE CSS file... voila all my 2000+ pages have changed. Try doing that...

However tables have there place... as tables and not as design element. I learned that the hard way.

Bugs are definitely a serious problem, but a problem of non conform Firefox, IE, Opera and all those other browsers. It's not just IE that messes it up. But they are getting better.
Hey wait a minute...! Let's get something straight here. I don't think anybody was advocating not using CSS at all. Just because someone uses a table-based design doesn't all of sudden mean they're not 'allowed' to use CSS. Where is this notion coming from? If someone uses a table-based design, the full power of CSS can be implemented into it in order to make the editing a large site easier just as well. I think what the author of the article was referring to was the difference between tableless and table-based designs, not difference between using CSS or not using CSS at all.
I was the one who provoked littlegiant's challenge and I must admit, that I don't know how to do that. In fact, I think it's impossible because of IE. But it's quite easy for browsers that support css properly, so I would say, that this only shows tables are useful when You can’t use whole css. (Actually I’ve never used table layout, so I would appreciate any example showing it can be done with tables.)

As for the article, I liked it although I am an opponent of table layout and would never use it myself. I liked it, because it is balanced, it admits that there are reasons why table should be avoided, but there are situations when it is easier to use them, and it showed me that maybe we shouldn’t treat it like a crime (not yet).

Still, for me, things like standards, accessibility etc. are more important then any particular layout, so will I avoid tables even at some costs.
I understand that someone decides otherwise, but I still think it’s better and more prospect not to use tables for layout.
It depends on what I'm doing if I use tables or not. If I don't feel like doing a ton of coding or IE wouldn't support it, I use tables. Otherwise, I try to use divs. I don't like either of them more or less, but I think div's are more fun.
Here's an example showing that my challenge can be easily accomplished using tables.

Table Layout Example

It's a 3 column layout with a header and a footer. Every box has a border around it and the boxes are nicely spaced out from one another. The layout spans the full height of the browser viewport when there is no content in any of the columns. Any of the three columns can be the longest and the layout still retains the exact same style (all other columns stretch in unison to match the same height as the longest column).

It looks identical in IE6, Firefox 1.5 and Opera 8.5 and uses NO CSS HACKS and doesn't even use a doctype switch to force IE into standards compliant mode. I whipped it up and had it fully tested in about 20 minutes.

If you want a ginormous headache, try making this layout using a tableless design. The only way you can do it is to force IE into standards compliant mode and then use images to draw some of the borders (not to mention a truckload of CSS hacks).


Actually, come to think of it, I don't think the above can be done at all as liquid display using a tableless design. You'd have to use a fixed width display. Then you could pull it off by using images to draw some of the borders.
Whoa! Can we back up a minute?
I seem to forgotten how much tone and context is missing in these forums. I wasn't directing my comments at you in particular, just at anyone who thinks that they don't need CSS at all. ANd there are a lot of those people around. I wouldn't dream of commenting on your coding skills and styles - I don't know you froma hole in the ground!
I don't use tables for layout at all. I could I guess, but I haven't needed to yet. I think it's the wrong tool for the job.
I think of it like a local phenomenon in our rural area. We have some peole around here who really like their chainsaws. (I'm not kidding, or exaggerating) These folks insist their chainsaws are wonderful tools and no-one really needs any other tool to do any woodwork. They are chainsaw carvers.
Now, while one must admire their skill with their tool, I (and most sane individuals) can't help but wonder what truly stunning piece of artwork they could come up with if they'd have learned to use a chisel to carve, instead of a chainsaw.
Meanwhile, we have some Luddite types who honest-to-goodness think that it is a noble thing to cut down trees with pieces of sharpened rock, or saws without handles. Again, they have admirers, but most sane folks, would use a chainsaw.
Tables are wonderful for drawing tables. They're the perfect tool for the job. But they're a bit clunky for web-layout.
While there are some layouts that are more challenging with CSS, I ask you this: are they chainsaw sculpture laytouts?
CSS enables me to think of site layout in a different way. This makes it the right tool for the job. I have done some layouts with CSS that would be (at least) difficult to duplicate with tables.
That said... I would never use CSS to simulate a table. Why would anyone want to do that?

Hopefully that clarifies my position. Just my opinion, but I didn't mean to offend.
*chuckle* Alright then, riv. No offense taken although I think you might have worded your post a little differently (e.g., used something else in place of your second person pronouns). Moreover, I'd like to reiterate that I don't think the author intended to compare using CSS to using no CSS at all.

As for your chainsaw analogy, I can sort of relate (although I've actually seen some fantastic sculptures made with a chainsaw...Very Happy ). But I get your point nonetheless.

However, I don't think a 3 column layout with a header and a footer would have failed to come into existence if the web had not started out using table based designs. This kind of layout is simply a very convenient way to present a web page. There's no doubt that most people would like to take advantage of the above-the-fold area on a web page and use it to hit the visitor with some kind of branding, hence the header. Then comes the content which is best split up into multiple columns to avoid tiring users eyes by forcing them to read long lines of text. Then naturally what one would want to do is remind the visitor what site they're on (and perhaps lead them to other pages on the site) using appropriate information in a footer section.

This 'chainsaw sculpture layout' (i.e., design evolved from tables) simply makes good sense and is, effectively, highly in demand amongst proponents of tableless design. This is why sites like are going out of their way to produce layouts like this in tableless versions. People want them.
I actually use a 3 column layout myself. I just think we tend to design differently when we're "thinking CSS" than when we're "thinking table"
I think the problem comes in when we insist that we have to use one tool all the time and never the other... but the results have to be exactly the same.
I don't understand this hardcore way of thinking.
As I said, I use a 3-column layout often. But I'm far more comfortable with CSS than with tables, so my layout is going to look different than that of someone who prefers the other tool... as it should
If there was only 1 right way to lay out a page... good grief Shocked the web wood be a boring place!

(And you're absolutely right about choosing my words... I'm having a hard time expressing myself lately... been staying away from the forums for that reason... I do much better face to face!)[/b]
I use both CSS and tables, but leaning more towards the tables structure, I am more comfortable with it. But even with tables, I still use CSS for background images and text styles, it makes editing the website much easier in the future, especially if you're working with picky client.
littlegiant wrote:
Care to give it a whirl, riv?

Not quite what you asked for, but it's close enough...

By the way, I didn't make that.
With all due respect, that's nowhere near 'close enough'. There's no header or footer running the full width of the browser nor are the columns running at the same height (and at the full available height). Did you take a look at the example I posted?
The external .css style sheet really makes a big deal in layout design and comprehension. Though there are still some things that lack from css, such as dynamic 2 column layout...
Related topics
HTML tables with irregular rows and/or columns
Positioning images with HTML
What's the best for page layout? CSS or using Tables?
browser differences, etc
Need CSS for two tables
Is CSS a replacement of tables or assisting method of them ?
Finish Assiez's Work for 118.72 FRIH$
tables to css
IE CSS problems
CSS and centered columns
tables or div ?
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.