CSS - Tableless

Pure CSS:

Generally speaking it's difficult to obtain proper horizontal alignment in CSS. Horizontal alignment wholly depends on the float declaration, which, though supported by all modern browsers, is supported according to two different models, with minor variations even between browsers that support the same model.

These problems aren't unsolvable; coding a simple four-block layout with the float declaration is quite possible. Nonetheless the danger of insolvable browser incompatibilities increases exponentially with every floating block you add.

Problems with Tables:

In the bad old days web developers placed all page elements in tables, and if the page didn't look as expected it needed yet more tables inside the already existing tables. This process was repeated until the page worked. The underlying theory seemed to be “If we squeeze enough HTML into the page it'll work eventually.” It made for eternal download times and nonsensical markup that was impossible to update.

Minimal table use means: use as little tables as possible.

In general you should style the DIVs inside the TDs instead of the TDs themselves. For instance, browsers see a width declaration on a TD as a sort of advice, and they don't hesitate to overrule it when they think it's necessary. They will always obey width declarations on DIVs, though.

The only exception is the vertical-align, which must be declared on a TD.

Web Page Development Best Practices
CSS Aid’s “Tables without Tables” misses the point (or: the dark side of web standards).
Creating a table with dynamically highlighted columns like Crazy Egg's pricing table
CSS-Based Tables: Modern Solutions
Ultimate guide to table UI patterns

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License