Cellpadding

Cellpadding adds space between a cell's content and the borders of the cell. This works a lot like a margin. Cellpadding is set by using the CELLPADDING attribute in the <table> tag and sets a padding for all of the cells in the table. The value used is a plain number representing the number of pixels thick you want the padding to be. The padding works all around each cell -- top, bottom, and both sides.

For an example lets take a table we made a couple of lessons ago:

See how the content of cell #1 is squished up right against the left side of the cell? That's the problem that CELLPADDING cures. We'll add the code below in the table's <table> tag:

<table width="50%" align="center" border=2 cellspacing=5>

Here's the "padded" table:

We've added a margin all around each cell of 5 pixels. See how much nicer this makes the content look. Note that neither the table or the cells are resized to add padding. The padding is made by reformatting the text itself.

Be careful when using CELLPADDING in a table with content that has styled margins. The padding will be added to the margins to place a lot of space between your content and your cells' borders.

Cellspacing

Cellspacing refers to the space between cells in a table. There's generally a default 2 or 3 pixels. This is the spacing that shows up in this table from our last lesson:

You can see a little of the yellow <table> background in the spaces between the cells. We can use the CELLSPACING attribute in the <table> tag to increase or decrease the amount of space between the cells. Here's the code:

<table width=100 height=100 align="center" border=5 bordercolor="red" bgcolor="yellow" cellspacing=10>

This would set 10 pixels of space between the cells and the table would look like this:

You can see all of the extra yellow between the cells. Also notice that the space comes from the size of the cells in this case. This is because I didn't have the cells sized, but I had the table absolutely sized. If I'd sized the cells, the table would have expanded as necessary.

CELLSPACING is generally used to eliminate spacing between cells. When we learn how to use tables to layout pages, we'll see why. To remove space between cells set CELLSPACING to zero:

<table width=100 height=100 align="center" border=5 bordercolor="red" bgcolor="yellow" cellspacing=0>

Here's what the table would now look like:

There's no yellow peeking through at all now. If we set BORDER and CELLPADDING to zero, too, we'd have the content of one cell butting right up against the content of another.

<table width=100 height=100 align="center" border=0 cellspacing=0 cellpadding=0>

Here's the table. Notice how the colored cells actually touch.

Exercises

Click here and make all of the tables on the page before moving on. It's handy to use copy and paste when making several like cells or tables.