I decided to borrow a book from one of my co-workers titled, "Everything You Know About CSS is wrong" by SitePoint.  Normally, I wouldn't read a book on CSS but the title caught my eye.

It turns out it is quite interesting.  It's main focus is on how to create tabled design via CSS Tables.  Pretty cool until you find out that though FF, Opera and Safari support it, IE 6 and 7 don't, though IE8 will.

For those like me who aren't in the know, the syntax is quite straightforward and I particularly like how technically, you don't have to explicitly mention a table row or even table cell as the browser will create an "anonymous box" around such missing items.  Example:

<div style="display: table;">
    <div style="display: table-row;">
        <div style="display: table-cell;">A</div>
        <div style="display: table-cell;">B</div>
    </div>
</div>

Is equivalent to:

<div style="display: table;">
        <div style="display: table-cell;">A</div>
        <div style="display: table-cell;">B</div>
</div>

or even:

        <div style="display: table-cell;">A</div>
        <div style="display: table-cell;">B</div>

Some issues/concerns I have:
1) Compared to floating, it appears to me that if you want to be explicit, you are using as many DIVs as you would TABLE, TR and TD.  In terms of code and page weight, it seems we are going back to implicit tables.

2) You can't use positioning within a DIV that has a display: table* property.  The workaround (a tricky one) is to surround the tabled DIVs with another container div that has a position:relative and then have another block-level element within the DIV cell that you can then do position:absolute.

3) Allowing the browser to add anonymous boxes, IMHO, is confusing in 2 respects:
a) What if the browser gets "confused" and doesn't display the table well and you have nested tables?

b) Nowadays, we don't code for job security but so that the next person can actually read what we are coding.  If we don't explicitly name table rows and cells, how will the next person (who could be us) understand what is going on? 

To this effect, if and when I use CSS tables, I will explicitly include table rows and cells even though it is at the risk of code/page bloat.

Having said the above, the good thing is, once fully implemented, the days of "I don't use CSS layout cos it is difficult and frustrating" are soon over as semantically, the syntax for CSS tables is easy to grasp.

Of course, if you are developing an intranet everyone will be using IE8, no problem but if you are doing something for the web and your target audience begins with IE6+, you will have to wait a while.

@Yawa

At first, I paused when I saw the title, but reading further, I realise why the title was chosen.

Good post all the way.

- nitation

Thanks for the Update mom