Table Tutor - Lesson 7
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 inside 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 often one or more
missing </table> tags. Make sure all closing tags are there
(especially /table) and then the problem disappears. ;-)