Tuning the tables

February 25, 2002

I can understand why you might not be ready to drop table-based layouts for your Web pages yet. CSS-based typography is well supported, so you can lose the font tag. But whether you use floats or absolute positioning, full layout using CSS only is still too hard for that rump of less compliant browsers, and there are glitches even across the better-behaved browsers. Simple tables for layout and CSS for everything else is the transitional design approach recommended by the standards mavens, from WebSiteTips to the New York Public Library (courtesy of Jeffrey Zeldman).

The original 1996 release of the Cascading Style Sheets standard (CSS1) went beyond the font tag, allowing you to do much more than HTML provided. In addition to typeface, color, size and weight, you could now change the line spacing, word spacing, background, underlining, or use small caps. You could access more weights than just bold and normal, if the reader’s font had extra weights. You could even create drop caps and lead-in lines using the :first-line and :first-letter pseudoelements. Additional paragraph formatting is also possible, with first-line indents, margins, padding and borders. Similarly, the current version of the standard (CSS2) goes beyond the kinds of table formatting that are possible with HTML.

Take text alignment. You don’t need to put align="left" in every table cell tag. Put td {text-align:left} in your stylesheet instead. You don’t need the valign attribute, either. Almost every browser currently used by humans (as opposed to search engine robots, which don’t care) supports the vertical-align property as well. It saves time and saves filesize. Similarly, NOWRAP has been replaced by white-space:nowrap. Judicious use of child selectors like table.main td and table.sidebar td mean that you don’t even have to use class attributes in every cell, the way I see so often. Remember kids, Netscape 4’s inheritance of styles is broken, but it’s not that broken (I’ve checked).

But you can do much more than that. For example, the cellpadding attribute in HTML applies only to the whole table at once. With CSS, you can vary the padding in individual cells, and vary the padding on different sides of the cell. There are also more things you can do in CSS than are permitted using the cellspacing HTML attribute, which again only applies to a whole table at once. By using the padding CSS attribute on the table, you can have more “cell spacing” around the edge of a table than between the cells themselves. For the few browsers that support the border-spacing CSS2 property, you can also have different horizontal and vertical spacing between cells.

Borders are also more flexible in CSS than the HTML border attribute. For example, you can create borders just across the rows or down the columns, add a border to specific cells but not others, or put a border around the table as a whole but not the individual cells. These properties are well supported. The borders can also be a bit more imaginative than the usual shaded kind you get from the HTML border attribute on tables. You can have any of the standard CSS border styles including dashed, dotted, raised, indented, ridged, grooved, double and solid.

If you’re prepared to study the CSS2 spec’s Section 17.6 in some detail, you can also get some really interesting effects by varying the border-collapse property between separate and collapse. Unfortunately, Opera seems to be the only browser that supports this property so far.

How do the browsers fare?

I’ve put together a few test tables for assessing browsers’ support for these CSS features. My results are not complete, not least because I don’t have a PC handy at the moment, so I welcome screenshots from browsers that aren’t listed. You can also look at resources detailing CSS support in different browsers, although information about CSS Level 2 properties is more sparse than the earlier Level 1 standard (see my earlier article on the subject and MacEdition’s guide to CSS support in iCab and OmniWeb). A useful resource on some implementation issues is CSS guru Eric Meyer’s article on the subject.

Round-up

There’s a lot of repetitive HTML markup you can avoid by using CSS for your tables. If you’re not ready to go the whole hog with CSS-based layouts of DIVs and positioning, at least consider using the power of stylesheets to remove font tags and reduce the number of nested tables in your layout. The NYPL Guide is a good place to start for ideas. A single table laying out the main areas of the page, and everything else styled in a stylesheet will be sufficient for many layouts, and give good results in a wide array of browsers.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition. Read other articles by CodeBitch

E-mail this story to a friend