HTML Table Tutorials, Lesson 2f, Cellpadding and Cellspacing Attributes of the TABLE Element

hitmill.com

HTML Table Tutorial Lesson 2f
CELLPADDING & CELLSPACING Attributes
of the TABLE Element

ALIGN
BACKGROUND
BGCOLOR
BORDER
BORDERCOLOR
BORDERCOLORLIGHT
BORDERCOLORDARK
CELLPADDING
CELLSPACING
COLS
COLSPAN
FRAME
HSPACE
ROWSPAN
VSPACE
WIDTH

CELLPADDING

Think of CELLPADDING as the width of the inside cell borders for the table cells. It is an attribute of the <TABLE> element which is set for the entire table in the table tag. In the table below, I have set the CELLPADDING="18".

All cells have a cellpadding of "18"

I left the middle cell empty, except for a space.
I also started the first sentence of this cell with a space.

Below, the cellpadding is set at 20, the BORDER is 2; CELLSPACING="0".

xxxxxxx XXXXXXX xxxxxxx XXXXXXX	xxxxxxx XXXXXXX xxxxxxx XXXXXXX	xxxxxxx XXXXXXX xxxxxxx XXXXXXX
xxxxxxx XXXXXXX xxxxxxx XXXXXXX	xxxxxxx XXXXXXX xxxxxxx XXXXXXX	xxxxxxx XXXXXXX xxxxxxx XXXXXXX

The CELLPADDING of the first table was 18 pixels and the CELLPADDING of the second table was 20 pixels. Compare the inner border spacing (white space padding around the cell contents) of each cell and its contents from the first table to the second table. Can you notice the difference of 2 pixels in the cellpadding from one table to the next? CELLPADDING refers to the inner margins of free space that each cell of a table has as its "padded" border. It is a cell border of "white space" inside the individual cells of a table. If a table has only one cell, or has one hundred cells, the attribute of cellspacing is written only once in the table tag.

CELLSPACING

CELLSPACING, on the other hand, refers to how space is left between each cell wall in a table. If you want no spaces at all, you MUST set CELLSPACING="0", otherwise the default is CELLSPACING="1", even if you don't even mention CELLSPACING. In the first table below, I will set BORDER="3" CELLSPACING="4" and CELLPADDING="10".


cellspacing="4" cellpadding="20"

Next tables, CELLSPACING="10" CELLPADDING="4"

A one-cell table. Cellspacing is 10 pixels.
Cellpadding is 4 pixels.

A two-cell table. Cellspacing is 10 pixels.

Cellpadding is 4.

Note:
The space between the cells across the rows will only be controlled if you use the cellspacingattributes in combination with a WIDTH setting for each cell in the first row.

Row 1 Cell 1 <TD WIDTH="100">	Row 1 Cell 2 <TD WIDTH="100">	CELLPADDING="12" CELLSPACING="4" BORDER="2" <TD WIDTH="100">
Row 2 Cell 1	Row 2 Cell 2	Cell 3 Do not set the width for the cells of the second row. They will play follow-the-leader, doing whatever the cell above it did.

The way to set a cell width setting is to insert it inside the <TD WIDTH="100">.
What happens if you set the cellspacing and use the TABLE WIDTH but not the CELL WIDTH settings? You will get the correct cellspacing again, but the cells will "discover" their own width". See the example below:

<TABLE WIDTH="300" CELLSPACING="4" CELLPADDING="8" BORDER="2" BORDERCOLOR="blue"><TR>
<TD>  </TD>
<TD>  </TD>
<TD>  </TD>
</TR></TABLE>

Tip:
Code a non-breaking space,   ,in every "empty" table cell, just so that the cell is tricked into thinking it is "holding something". It begins with the ampersand then the letters nbsp and followed by a semicolon ( ; ). (   )

Back | Next

Lesson #1 | Beginning of Lesson#2

HTML Table Tutorial Lesson 2fCELLPADDING & CELLSPACING Attributesof the TABLE Element

CELLPADDING

CELLSPACING

HTML Table Tutorial Lesson 2f
CELLPADDING & CELLSPACING Attributes
of the TABLE Element