Nowadays we all know that HTML tables are generally a bad idea for formatting web based layouts, they bloat the source and reduce accessibility, particularly hindering screen readers.
They should be used sparingly and only really for data tabular in nature which would otherwise be difficult to successfully replace with css alone.
Things get complicated when Content Management Systems come into play, to accommodate a large variety of possible content they frequently spit out a nested nightmare of table based layout.
Recently a few frameworks have been published which aim to provide better support for grid based layouts without resorting to tables, most noteworthy are
Yahoo's yui grids,
blueprint and
tripoli.
Tripoli is not really a css grid framework as such, but aims to reduce cross browser css issues and provide a clean starting point by resetting all browsers to a common base line.
Blueprint goes a little further, offering full grid support, although the grid dimensions must be manually adjusted if the default settings prove unsuitable, Blueprint also includes css reset and more cross browser tweaks similar to tripoli.
Yahoo's yui grids is a fully comprehensive css grid framework catering for nearly all the screen resolution / grid combinations you are likely to need and like the others includes reset / cross browser fixes, it is a much heavier offering as a result but comes with plenty of examples and documentation plus a great online builder utility to generate the starting point html.
It can be argued that using these frameworks does force the inclusion of some non semantic html (a few extra divs), however we found this acceptable and a considerable improvement over even simple table based layouts.
Future follow ups to this article will examine each framework in turn, with examples and comparisons to the normal tables based solutions.