>The whole point of CSS is to take things like width="200px" out of the markup.

I don't see how that's really an improvement in this particular case. In fact, I would say that using 'width="200px"' inline may actually be more readily understandable and maintainable than having the style defined somewhere else and then used only once. (I'm assuming that the 'width="200px"' is not duplicated multiple times in the PHP/Python/Arc/etc code that generates the HTML page. If the same style needs to be identified multiple times in the source code, then of course it may be a better idea to define it once and thereafter refer to it by name.) Are there any practical benefits that I may be missing?

How do you know when you use a style the first time that you'll never use it elsewhere? If you've got many one-off style declarations, you probably don't have a very consistent graphical style.

Besides that, it's nice to know where all your styles live instead of having to grep your whole project. And inline styles take precedence over everything else, so mixing them with stylesheets can create havoc.

The example is contrived because there is no content in the table cells. In the real world there will be some content, and suddenly your "width"-attributes are many lines apart and not nicely aligned. This makes is a mess to maintain, because there is no single place where your layout is defined; the information is spread all over the document, mixed with other kinds of information.

Furthermore, separating style info into a style sheet allows you to adapt the style for different devices.

You have to show what your CSS would be also. My point is that the CSS you have to write to get your example to look like mine is extremely complicated when all you have is the box model.

Like this:

  #left{
    float:left;
    width:200px;
    margin-right: -200px;
  }
  #right{
    float:right;
    width:200px;
    margin-left: -200px;
  }
  #middle{
    float: left;
    margin-left: 200px;
    margin-right: 200px;
  }

People tend to avoid this relatively simple solution because of the double-left-margin bug in IE 5 & 6, but that's getting to be an excessively old set of browsers. And even then, it's usually fixed with a "display:inline;" on the ones with left margins.

edit: it's not an ideal solution, as it has those negative values which have to match the related positive ones. Which is solved with something like Sass or Less, because CSS lacks any "programming" abilities, which I see as its main failure. Even variables and simple math would be acceptable, but instead, nothing.

Downvote? It's correct, and it's exactly what was asked for. Here's a Fiddle demonstrating it: http://jsfiddle.net/yBs5V/

Or, to make it _really_ simple:

  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>

  div.column {
    margin: 10px;
    width: 200px;
    float: left;
    }

EDIT: Missed the key constraint, resizable center column. What I have above won't work for that, but shows that replacing tables isn't very difficult.

Nope, not quite. Resize your window to less than 600px and see what happens.

You can wrap the above in another div with a width of 660px or greater and it'll have the same effect as a table if the window width is less than the width of the columns (plus margins/padding).

There is nothing complicated, even using floats. Usig display: table-* it's damn easy. You also got CSS columns, and flex box.

> The whole point of CSS is to take things like width="200px" out of the markup.

IIRC, you could stick the TD's width value in a CSS class and it would work exactly the same.