The Web Standards Project’s (WaSP) Browser Upgrade Initiative (BUI),
has spurred many a designer to move towards more standards compliant
web design, using CSS rather than tables for layout to save user
bandwidth while enhancing underlying semantics, accessibility, and
“Tables are dead…”
Several designers have taken Jeffrey Zeldman’s lead
in posting tutorials that have helped us get over the initial hump of
table-less design. The first efforts have focused on creating two or
more columns using CSS positioning instead of tables, thus allowing for
a (complete) separation of structure from presentation. These broader
techniques have been documented and archived at Eric Costello’s glish and Rob Chandanais’ Blue Robot.
Others have chimed in, including Owen Briggs’ Box lesson and Tantek Çelik’s box model hack/workaround, detailed by Eric Costello, and explained by Tantek. Dotfile lists hundreds of sites designed with CSS layout.
“…Long live tables”
While these excellent resources address the larger issue of creating
a general layout using only CSS positioning, other practical questions
arise as we find ourselves, as designers, faced with a problem that is
trivially easy to solve with tables, but not so obvious with CSS. Such
a question was posed on the Webdesign-L list with the subject line “Tables are dead … long live tables.”
Suppose you want to have a bunch of thumbnail images that link to
larger versions of the images – a fairly common type of web page.
Suppose further that each image contains a short caption that you would
like to keep centered underneath its image. And, in the interest of
conserving browser window real estate, you want to line these
image/caption pairs up in rows across the screen, but in such a way
that they will wrap as necessary depending on the width of the browser
window (liquid design). With the last requirement we have stepped out
of the realm of tables, and into the realm of CSS.