Creating liquid layouts is an immense pain. Now, I totally understand that tables should be avoided for layouts like the devil but... it appears to me that table cells are uniquely suited to fit the entire space available.
Has anybody used tables for a perfect liquid layout? Please enlighten me on the perils and pitfalls.
You can't. Unless you're talking about replacing elements, such as div, with a table. If you're talking about making the whole page a table then you're taking two steps backwards and not doing liquid layout at all, just table layout.
The main drawback to using tables for layouts is getting mocked and downvoted by anti-table fanatics :)
Ok, seriously, the 'fanatics' have a point. Tables are best used to present tabular data. The leads to a more 'semantic' web. And, as a very practical point, using them for layout may confuse screen readers into thinking there is some useful data contained in the table's cells. (Which there is, but nested farther down - not directly in the layout cell.)
However, it seems there are some layouts that cannot be done without tables. The site I work on must be almost completely 'liquid' - I have many customers sharing the same site templates, and I really have no idea what size (width, height) they will want their headers, menus, or content to be. Since I can't set specific sizes, or even percentages, I need to use tables. With a table-based layout, everything gets distributed nicely without any fuss. Items that are supposed to stay on the same row always do. And colspans and rowpsans are pretty handy too.
Edit: I should add that there are some values for the css display that help divs behave like table cells. I haven't really used these much, so I don't know if they would allow me to replace my table-based layouts.
And also - deeply nested table layouts are a disaster and should be avoided. I am talking about a single top-level table to contain and position the main site elements.
Divs will also fill the entire space if you make them a block: ie,
<div style="display:block">
block fills as much space as it can. inline fills only as much space as is needed for the divs content.
A good reference: http://www.w3schools.com/css/pr_class_display.asp
Once you really start using css, it really is very nice...until you run into those three columns that need to be the same height :)