What are they? They're table properties
that add space (or a clear border, however youwant to visualize it) within a cell (cellpadding)
or around the individual cells (cellspacing).
Cellpadding
Check out this table:
| This
is a little cell, so we're stuffing it |
Here's
another little stuffed cell |
| I'm
a stuffed cell too and it's crowded |
Hey, you in cell
3, shut your yap. |
Notice how the text is butted up to the
side? Let's give the text some room to breathe by giving it
cellpadding.
We'll add cellpadding=""
to our table tag, and between the quotation marks we'll put
the number of pixels of space we want in each cell. Like this:
<table width="150" border="1"
cellpadding="10">
| This
is a little cell, so we're stuffing it |
Here's
another little stuffed cell |
| I'm
a stuffed cell too and it's crowded |
Hey, you in cell
3, shut your yap. |
We've just added 10 pixels of padding inside each cell! Not
so squished now, huh?
Cellspacing
Taking that first example, lets see what adding cellspacing
does. We'll add a cellspacing of 10:
<table width="150" border="1"
cellspacing="10">
| This
is a little cell, so we're stuffing it |
Here's
another little stuffed cell |
| I'm
a stuffed cell too and it's crowded |
Hey, you in cell
3, shut your yap. |
Veddy interesting, eh? It adds the space
around the outside of the cells, as opposed to cellpadding
which adds it inside. Now let's do one last example adding
both cellspacing and cellpadding:
<table width="150"
border="1" cellpadding="10" cellspacing="10">
| This
is a little cell, so we're stuffing it |
Here's
another little stuffed cell |
| I'm a stuffed
cell too and it's crowded |
Hey, you in cell
3, shut your yap. |
Now everyone can breathe and maybe cell 4 will
get a better attitude.
If you'd like us to alert you when new tutorials arrive,
join our email list (on the menu to the left)
You can email us at
Sorry, no individual questions answered,
though we may use yours as the basis for a new article.
©2007 www.WebsiteBeginner.com
|
