Table borders, spacings and colours

If you want to use strict XHTML, you would put a style value inside your TABLE, TR, or TD tags. But more simply, using older HTML, there are four values you may commonly want to put inside the table tag: here,

We've looked at bgcolor elsewhere, and it is very straightforward. You can set bgcolor for the table as a whole (in the table tag) for the row (in the tr tag) or the cell (in the td tag).

The border value behaves as you might expect:

The cellpadding dictates the amount of space between the words and the edge of the cell. Here there is more space to illustrate:

Or you can have no cellpadding at all, and use the table just to highlight something:

The cellspacing comes into its own with more than one colour. The table background colour shows round the edge of every cell, and between cells, even with border="0".

Cells have their own background colour, and if no bgcolor is set for a cell, the bgcolor is inherited from the row or the table. If all the cells have their own background color, and the cellspacing is 0, you wouldn't get to see the table background color at all.

If you increase the cellspacing, all the cells in the table are surrounded by a border space with the same background colour as the whole table.

If you put in a row background colour, all it does is act as the default for the cell background colour. It does not affect the colour of the spacing area. And here is a really large border just to illustrate that rather odd effect.

With no borders or colours, cellpadding and cellspacing behave in a similar fashion, making more space between the separate cells.