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. ;-)
| Table Tutor |
|
|
| Tables Quick Reference |
| HTML 4.0 Reference Barebones HTML Guide |
|
|
|
|
