The Bulldozer & the Bamboo Rake - Tables vs. CSS

Get Started
1

The Bulldozer and the Bamboo Rake

A painfully accurate parable, about the use of HTML TABLES (the Bulldozer) versus Cascading Style Sheets - CSS (the Bamboo Rake) to structure web pages.

[The Parable] Let’s say, a house has burnt down the day before the inaugural parade, right besides the grandstand where all the speeches will be made, and you have been grabbed on your way back to the office after lunch, to clear the rubble and level the lot, and spread some clean sand, because the operator of the bulldozer has stumbled and broken a leg in the rubble. The bulldozer is a D12, the biggest there is, with a 15 foot blade, and capable of clearing the lot in 5 passes - in about an hour. And spreading the sand should take no more than another hour. The bulldozer is as easy to operate as a farm tractor, which any 6 year-old can drive, after having been shown once. And to finish the job and make everything look good, you’re also given a bamboo lawn rake, for raking simple Japanese Garden style patterns into the sand, which will take about an hour, at the most. The whole thing can be done in 3 hours, max.

You’re just about to climb onto the bulldozer when the Semantics police shows up and says - “No, no, you cannot do this. The bulldozer cannot be used to clear the rubble; it can only be used to doze bulls.” You ask, “why, for heavens sake?” and the Semantics police says, “it says so right in the name; it is a BULLDOZER man; get a grip! It could not be any clearer, Bulldozers are made only for dozing bulls, and this D 12 Bulldozer is made for dozing 12 bulls”. And you look around and say “ok, I guess I can go home now because there isn’t any bamboo to rake here”. But the Semantics police says - “No, No, No; not in this case. You must use the BAMBOO RAKE to clear the rubble and level the lot, and then spread and rake the sand”. And you say, looking at the mountain of rubble and the bamboo lawn rake - “but it says BAMBOO RAKE, and there is lots of rubble and no bamboo anywhere around here”. And the Semantics police say, “never mind that, this is a very elegant way of clearing the rubble and leveling the lot. Get a grip man, and get on it!” And you say, “but this will take forever; I’ll still be here next year!” And the Semantics Police say, “so you better get on it, so you won’t still be here in 3 years.” [End of Parable].

This is exactly and precisely the current situation in the production of web sites. It could not get any weirder; an actual, real world Alice in Wonderland situation. While the Semantics Police insist that HTML TABLES can only be used for ‘tabular data’, they have no such reservation about using STYLE SHEETS to generate structure. Talk about a double standard.

Worse, two basic elements in TABLES are “CELLSPACING” and “CELLPADDING”, by which the space between TABLE CELLS and the width of the inner margin around the perimeter of each “CELL” can be specified. And CELLS can contain anything and everything under the sun. Cell phone cells, for instance, typically contain an areas of about .5 to 2 square miles in urban areas, and as much as 50 sq. miles in the country, with commercial and residential highrises, houses, apartments, condominiums, roads, lanes, bridges, stores, shops, hordes of sparrows, pigeons and people, countless pets and innumerable pests, in short, everything under the sun, including endless acres of kitchen sinks - and at least in many cases, web site development offices. Any web site development office with a cell phone is in such a cell. Biological cells contain the machinery of Life, and in aggregates, make up all living things on this Earth, from amoeba to our selves. Storm cells contain vast areas of storms, terrorist cells typically contain any number of terrorists, prison cell contain one or more prisoners, and rubber lined cells contain mentally challenged people who are prone to beat their heads against the wall.

The simple fact is that structuring web pages with CSS is a colossal waste of time; the basic web page 3-column layout with a header, footer and fluid center is a pleasant 15 minute breeze in TABLES which works in all browsers ever made - and a painfully agonizing 5 hour toil in CSS, which has to be tweaked endlessly to work in all major browsers - and falls apart at the slightest change.

And if you want to do a recurrent 72 column 10 row layout with full width headers for each section, for your collection of football trading cards, let’s say, it’s as easy as COLSPAN=“72” and ten times 72 TD’s one TR in TABLES.

The bottom line: TABLES are a brilliantly simple, endlessly variable, rock solid and supremely effective way of structuring web pages, and is well within the capacity of the average 10-year old, and his or her grandma. And while CSS is a powerful and supremely effective means of styling web pages; it’s a colossal time wasting joke for structuring web pages.
I for one won’t waste my time, nor my customers time.
Peter;

2

As long as the issue is all about what’s convenient for you, perhaps you are right; although when it comes to restructuring your content you may not be so happy, unless your poor client is paying by the hour.

Once you are proficient at CSS it is easy to use, and produces sites that are much friendlier to those who matter—the people trying to access content.

But this is a tired debate; you can read lots of threads about it in these fora. (I just laid down Zeldman’s 3rd edition of Designing with Web Standards to check the forum; it’s worth a read. :wink: )

3

The simple fact is that structuring web pages with CSS is a colossal waste of time; the basic web page 3-column layout with a header, footer and fluid center is a pleasant 15 minute breeze in TABLES which works in all browsers ever made - and a painfully agonizing 5 hour toil in CSS, which has to be tweaked endlessly to work in all major browsers - and falls apart at the slightest change.

Have you ever considered that the problem is your lack of experience with CSS? I think anyone with any real experience can do a 3 column layout in CSS as fast, if not faster, than using tables. The difference is that, using CSS, the HTML is doing what HTML was made for - describing content.

As for your bulldozer analogy, in HTML it just doesn’t work like that. Elements are designed to abide by their name.

If we want to get all metaphorical, bicycles are also within the capacity of 10 year olds and grandmas. Doesn’t mean they are better than cars, does it?

Say you want a light bulb outside, 6m above ground level. You can either use <lamppost /> or use 40 <book />s to support the bulb. <lamppost /> is made to hold lights, <book />s aren’t.

4

As an analogy, that is stretched; tortured beyond reason. As a metaphor, it is simply not applicable. The case you make is specious, having no bearing on the real issue. Just where have you been since 2001?

gary

5

It’s a lovely metaphor, and quite wrong. Sorry, but no one here is going to revert to table structures for their designs. However, if you’d like to learn creating layouts using CSS, we’d be glad to help (I’m still learning, so every time I help someone else, I learn something new – it’s good for me and thee).

6

see the next post: CSS - “Test Your CSS Skills Number 30 - Multi columns”, in which a simple 3 column list took the highly expert author “a goodly number of hours”. In TABLES it takes about 5 minutes.

Also: In their new book, “Everything You Know About CSS is Wrong”, world class CSS expert authors Rachel Andrew and Kevin Yank state - “Clever designers figured out ways to make CSS do what they needed it to do, but these techniques were so convoluted that they quickly became difficult for the rest of us to master. Today, even the most experienced designers routinely see their (web) sites break in new and unpredictable ways as a result of a subtle change in content, or a new browser release. For the creative elite who came up with these often mind-bending techniques, CSS can offer a thrilling and constantly surprising (oh no, not again! writer’s comment) landscape in which to work. But for beginners learning to design their first web sites, today’s CSS can be shockingly difficult to work with. CSS is just too hard.”

The authors then go on and describe a frustrating 3 hour struggle to come up with a simple 3 column, 2 row, and precariously fragile, web page lay-out, which could have been done in 5 minutes by any average ten year-old. They then go on to describe the newest CSS innovation in “The Grid is the Thing” - CSS TABLES. All of a sudden it’s ok to stick anything into these tables, “since they are contained in a division”, according to the authors. Gimme a break.
Peter;

7

[ot]yes they are

bikes rule the world[/ot]

8

@petweis

You ought at least to acknowledge that the ideal situation is for a separation of content and presentation. Those who aren’t interested in or can’t access layout (screen readers etc) need a logical flow of content, which is lost with table layouts. Table layouts mix content and presentation, making for very poorly structured, inaccessible and hard-to-update sites.

CSS isn’t perfect for layout, but it is improving. CSS 3 allows for columns in a much simpler way than tables. The Everything You Know book is controversial, and their comments about the difficulty of CSS are a little over the top. They really wanted to push for table display layouts, but these have serious issues in terms of content flow, just like table layouts. CSS tables are useful in small bites, and make up for a lot of apparent CSS deficiencies. The problem has been with IE not implementing them rather than a problem with CSS itself.

I recently watched a designer struggling to slice an image that needed to span across a lot of content. The pains he was taking were ridiculous. It took me about 30 seconds to place the full, unsliced image for him with CSS—after we had removed all the unnecessary table rubbish.

Your arguments in favor of table layouts are misguided—just like all belief systems that are based on how people want things to be, rather than on how things really are.

9

If you ignore IE7 and earlier then you can easily use CSS tables to do your page layout if you really do find all that complicated table layout stuff easier to do than copying a few simple commands from a CSS templayte that someone else has already built.

10
Off Topic:

Is this another one of the “flogging a dead horse” fluff topics?

Since when did anyone in their right-mind use CSS for “structuring” a page (albeit they can layout content) even if they tried to use CSS to “structure” they couldn’t do so as they [markup (structure) and CSS (presentation/layout)] are completely separate entities. Q.E.D.

Admittedly, people can abuse HTML for “presentational” purposes though or misuse CSS for styling generic text to look like a H1, instead of proper “structural” markup, etc.

11

Three column layout done in less then a minute:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>3 Columns</title>
    <style type="text/css">
      .col {
        float: left;
        margin: 10px;
        border: 1px solid red;
      }
      
      .one { width: 500px; }
      .two, .three { width: 200px; }
    </style>
  </head>
  <body>
      <div class="col one">Column One!</div>
      <div class="col two">Column Two!</div>
      <div class="col three">Column Three!</div>
  </body>
</html>
12

No, ‘accurate’ means ‘free from error; precise; exact’ and does not apply to any part of your post. The word you’re looking for is ‘embarrassing’. That means ‘to make uncomfortably self-conscious’, e.g., as in this case, exposing one’s utter ignorance about something in a forum for professionals in that area.

No, it is not. You are comparing apples to oranges.

In your ‘parable’, one option is to use a bulldozer for levelling a pile of rubble. That’s what bulldozers are for. And you compare that with using the table element type in HTML for layout purposes, which is not what that element type is for. Go ahead, read the HTML specification if you don’t believe me.

A more truthful parable would be an option to use either a giant bulldozer or a small brush to do the hair of your 6-month-old baby. Yeah, you can do it with the bulldozer if you’re very, very careful, but it will most likely do more harm than good. And a brush is exactly made for doing hair, just like CSS is exactly made for controlling the presentational aspects of a web site.

If you want a boring, rigid, grid structure for your site, then use display:table et al in your CSS. That’s fine (although I suspect that you may not yet understand the difference). It won’t work in older browsers, but that’s not a fault with CSS but with those browsers. And you can use graceful degradation to serve them a satisfactory alternative layout.

The 1990s are over. Just accept that and move on.

13

You can use a screwdriver to drive a screw into wood.
You can use a hammer to drive a screw into wood.

Both work.

One does the job it was intended to do.

You can use a can opener to open a can of beans.
You can use a screwdriver and a hammer to open a can of beans.

Both work. (One does it rather messily though.)

One does the job it was designed to do.

Need I same more?

14

petweis, a few points… What makes you think the “semantics police” are producing a double standard? Using tables for layout is expressly stated as a NO-GO by the W3C themselves. The people who are in charge of laying down the standards for the languages you proclaim to know about. In regards to your other comment (stylesheets to generate structure), how exactly do we do that? HTML provides the structure, don’t make the mistake of proclaiming positioning to be structural, that’s like claiming the layout of your furniture in a house can’t be changed because it affects the structural security of the whole building.

You say styling websites with CSS is a waste of time and call that a fact (with no citations or sources of proven experiments to prove that it wasn’t just your subjective lack of intelligence of how CSS can be appropriately used)… most unscientific for someone claiming all sorts of correlations between science and the contents of a cell… oh and on that note… please don’t compare table cells with biology or other definitions of the word cell, it’s downright embarrassing that your making such connections which have no relative or relational value, It’s the same as me saying “That woman is hot” and making the connection (you are) to imply that therefore, she must be feverish or perhaps at a nuclear temperature. There’s stating facts and there’s what your doing, drawing correlations from absurdity.

If it takes you five hours to do a 3 column layout in CSS, you’re doing something wrong, it’s not the language, it’s entirely you. A bad workman blames his tools and that appears to be the case for you. Though I will point out that you may well be wasting your customers time, because if you can’t produce semantic code and write CSS without burning 5 hours (assuming you charge by the hour) you must be wasting more than their time, my guess is you’re wasting their money :slight_smile:

15

It seems you didn’t read the quiz at all as you have chosen as your example something that is actually impossible to do in tables and therefore your argument fails at the first hurdle. (You cannot spread a continuous list over multiple cells without breaking the whole thing into little bits. Which is actually the main problem with tables as they are too rigid and inflexible for a lot of layout purposes.)

If you want to use tables for layout then carry on as that’s your choice but please don’t bore us with another CSS vs tables thread as that was settled years ago and CSS came out on top.

16

I have a feeling that petweis won’t be able to grasp what you’re saying, Paul. To him/her, semantics is something that happens to other people.

17

I think this is a moment for http://oo00.eu

I was going to say something more cogent but I think the link sums it up.