Cheap Tricks

Images and tables can be used to achieve visual, presentational effects that don't really add or support meaning. But, they can look good. Here are a few.

Rounded Corners

Content goes into this cell, the center cell of nine. Each corner cell has a separate image in it. The image has a transparent part that lets the table cell background color show through, to produce a rounded effect.

To allow the natural background color show through, center cell has no background color added.

Rounded Corners with Nested Table

A Nested Table that holds the Content goes into this cell, the center cell of nine. The nested table is completely inside the table data cell; the nested table's cellpadding attribute value allows for a visual margin around the text.

Rounded Corners with Nested Corners and Borders

The same nested table with inner table border turned on (="2") and the outer table border turned on (="2").

Rounded Corners at Top Only

Notice that the table row color is here lightest blue; the colors for the table data cells have been removed to allow the row color to show. Also, the rounded corner images are gone from the bottom row.

Instead of the three bottom cells, there could be one cell with a colspan="3" attribute and value.

Rounded Corners, Table Background, and Row Colors

Table Head

An Outer Table places a background="back.gif" in back of the whole thing. For Netscape to use this non-specified, non-valid, non-W3C-approved attribute and value, place the background="" attribute and value into the other tables' start tags.

Notice that the table row colors override the background pattern.