The appearance of a table can be changed in many ways. For example you can
change the width, alignment, background color/image etc... CELLSPACING and
CELLPADDING also aids in the the way the table is displayed. So what exactly
do these 2 attributes define? Take a look at the diagram below:
The outermost thick grey line represents the table and the 2 rectangular boxes
within this area represents the cells. CELLSPACING refers to the space between the
edge of each cell and table, as well the the space between each cell - this is
highlighted in light red in the diagram. CELLPADDING on the other hand refers to
the space between the edge of each cell and it's content - represented by the blue
area in the diagram above.
Defining these are simple and can be done by adding the 'cellspacing = "x"' and / or
'cellpadding = "x"', where x is the required measurement (e.g. 1px), within the <table>
Here are a couple of more examples to make sure everything is crystal clear:
Cellspacing can in fact also be used to table borders - these usually look better
than the default "BORDER" attribute.
Back to HTML Tutorials ]