[haberman]

I looked into CSS tables a bit more, and this seems to be how you'd write the above:

    <style type="text/css">
    .table { display: table; width: 100%; }
    .tr    { display: table-row; }
    .left-column { display: table-cell; width: 200px; }
    .middle-column { display: table-cell; }
    .right-column { display: table-cell; width: 200px; }
    </style>
    <div class="table"><div class="tr">
      <div class="left-column">Fixed left column.</div>
      <div class="middle column">Liquid center column.</div>
      <div class="right-column">Fixed right column.</div>
    </div></div>

This is definitely a huge improvement over the CSS box model. If this had been available in practice 10 years ago, I probably wouldn't be complaining about it now. But I still think it is because CSS2 is so big, complicated, and had so many errors that it wasn't implemented for so long.

[BrandonM]

That's so much more verbose than using tables. What do you gain?

[olavk]

Regarding verbosity: In any real wold page, you would have some additional css properties, so the overhead with defining classes and referencing them in css would be there anyway. So the verbosity advantage of html tables is down to "tr" being shorter that "display: table-row". That is not really a serious objection.

Btw., if you don't want a seperate stylesheet, you can embed the css style information directly in the html:

    <div style="display: table; width: 100%"><div style="display: table-row;">
      <div style="display: table-cell; width: 200px;">Fixed left column.</div>
      <div style="display: table-cell;">Liquid center column.</div>
      <div class="display: table-cell; width: 200px;">Fixed right column.</div>
    </div></div>

This quickly becomes an unmaintainable mess but if you really want, you can do it.

[olavk]

It gives you separation of concerns between content structure and presentation. This allows you to adapt the presentation for different audiences. For example, on a phone with a small screen, you might not want a three-column layout, but just have everything in one column. You can do that with an alternative style-sheet.

Additionally, you don't have to confuse screen readers with a table which don't really contain tabular data. So it also more accessible.

[mdaniel]

Without actually trying that code, my guess is that unlike a formal "table", those 3 div tags will have different page-wrap behavior (e.g. not intra-div, but the wrapping of the div elements with respect to the screen width).

That may not appear to be a big deal, but try loading that page on a mobile device and it will become a bigger deal.