Next are a couple of attributes called `CELLPADDING` and `CELLSPACING`. Both are used up front in the `<TABLE>` tag. `CELLPADDING` is the amount of space between the border of the cell and the contents of the cell.

    <TABLE BORDER=3 CELLPADDING=12>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

The default value for this attribute is normally 1. The reason it is 1 and not 0 is so that any text in the cells won't be banging up against the borders. (Although you could specify 0 if you wanted to).

If we substitute `CELLSPACING` for `CELLPADDING` we get a slightly different effect.

    <TABLE BORDER=3 CELLSPACING=12>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

The default value for the `CELLSPACING` attribute is usually 2.

We can, of course, use these attributes in combination.

    <TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

And, to see what it would look like, we can set them both to 0.

    <TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>

    <TR>
    <TD>Ed</TD>
    <TD>Tom</TD>
    <TD>Rick</TD>
    </TR>

    <TR>
    <TD>Larry</TD>
    <TD>Curly</TD>
    <TD>Moe</TD>
    </TR>

    </TABLE>

Ed | Tom | Rick
Larry | Curly | Moe

Before we continue there's an issue I'd like to touch on. I've seen more and more lately that some HTML authors are omitting closing cell `</TD>`, row `</TR>` and table `</TABLE>` tags. Even the W3C's html recommendation suggests that at least the closing cell and row tags can be left out. The idea is that the browser should know that when another cell begins, the last one must have ended. Unfortunately, as your tables become more complex, some browsers don't always understand this and the table goes goofy. The easiest way to completely sidestep this issue is to always include those closing tags. This also leads up to our next FAQ...

FAQ: I made my page using SooperCoder and my page is fine in Browser A but it's completely invisible in Browser B. What's going on? A: Whenever a whole page, or large portions of a page just "disappear", the culprit is usually one or more missing `</TABLE>` tags. Make sure all closing tags are there (especially `/TABLE`) and then the problem disappears. ;-)

<< BACK NEXT >>