Tables and CSS
For more sophisticated control over borders, spacing,
and padding, you can use CSS. Note that support for this
control is somewhat spotty in the “version 4″ browsers
and non-existent in older browsers. One way to handle
this problem is to set the borders, cellpadding, and
cellspacing using the attributes above, and then refine
the values further using CSS. (For most browsers that
understand CSS, the CSS rules will override the
The CSS properties are as follows:
paddingCSS property corresponds to the
border-spacingCSS property corresponds to the
borderCSS property corresponds to the
The CSS properties allow us to use any valid CSS
px are okay, as are
pt, and so on. We’ll stick with pixels for
our example below.
Example 4.9. Table: CSS Borders
border: 4px #ff00ff ridge;
border: 2px #0000ff dotted;
border: 2px #ff0000 solid;
border="0" cellpadding="0" cellspacing="0"
summary="Table with CSS borders">
<td class="middle">Middle Cell</td>
The overall table has a green background and a ridged, lavender border. The result is garish to say the least… presumably your tables will be far more subdued and tasteful.
Ordinary table cells have a yellow background, ten pixels of padding, five pixels of border-spacing (i.e. cellspacing), and a blue, dotted border.
Table cells with
class="middle" have an
extra fifteen pixels of padding to the right and a red,
Note that some modern browsers still don’t support
border-spacing attribute. If you’re
using one of these browsers, all three cells will be
adjacent to each other, and you will not see the green
background of the table itself. Again, the solution is
to use CSS to do your primary styling, and the table
attributes for backup.