A challenge - convert these three tables to a full css design

As demonstrated above, it certainly is possible to achieve a table-like layout using divs (though I'd use display:table-cell) for the "td" divs. But just because you can do something doesn't mean you should.

A lot of people moving to CSS-driven layouts get lulled into thinking that EVERYTHING should be done in CSS. That defeats the purpose completely. I recently had my group convert all their development to CSS-driven layout, so we could code more efficiently and commonly. They were all using tables for their layouts. One of the biggest gripes was that they thought it meant we do away with tables altogether. My reply is simply this: You're missing the point. Tables are meant to display tabular data. Sure, they're a great way to achieve pixel precision with relative ease, but from a semantic point of view, they're the wrong type of element to use for layout.

So the question raised after that answer was what are we then trying to achieve with CSS-driven layout? A few things: 1. Proper, semantic coding; that is, using elements with their intended purpose in mind. 2. Lower the HTML-to-Code ratio. We have lots of extraneous code simply by virtue of having so many tables (and nested several levels deep at that!). By converting to CSS-driven layout, we'll see significant reductions in code base size; 3. CSS-driven layout enables to separate our design from the content. As it stands our design and content are married to each other. Tables keep us from being agile with our interface.

Sorry I've rambled a bit. But I want to revert to my point about semantic coding. When you're using something for a purpose for which it was not originally intended, you end up creating a lot more code (in bytes). As in the example above, that's a lot of code to achieve something a table does naturally, and with a lot less code to tweak:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

There's a simple framework. This also plays into the second point about HTML-to-Code ratio. In the case above, when you add it all up, there's a lot more code devoted to the div method than the table method. That's a good sign that it's not the optimal way to approach your problem. Granted there may be instances where you might have to do a bit of "tweaking." But frankly, if I find myself in that situation, I usually find that I have to rethink my presentation.

GoofyDawg