hitmill.com
link to hitmill.com home page

 

 

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


 

 

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> &nbsp;</TD>
<TD> &nbsp;</TD>
<TD> &nbsp;</TD>
</TR></TABLE>
Tip:
Code a non-breaking space, &nbsp; ,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 ( ; ). ( &nbsp; )

 

 

 

 


 
Contact
 
Updated 11 April 2006
© hitmill.com
All Rights Reserved