










|
 |

Killer Tables - Cellpadding/spacing

As far as the third-generation site designer is concerned,
cellpadding and cellspacing in tables are essentially identical. Cellpadding
describes the amount of space between the contents of a cell and the border of
a cell. Cellspacing describes the distance between the a cell and the table. As
implemented by Netscape, both tags affect both horizontal and vertical
distances at the same time.
Microsoft's Internet Explorer does a better job of giving designers control
over various aspects of table creation.
Table with Cellspacing=5
Larger than following example. Cell borders are obscured. Default is two
pixels.
<table border=1 cellspacing=5 cellpadding=0 width=150>
<tr>
<td><img width=75
height=75 border=0 SRC="images/redbox.gif"></td>
<td><img width=75
height=75 border=0 SRC="images/orangbox.gif"></td>
</tr>
<tr>
<td><img width=75
height=75 border=0 SRC="images/greenbox.gif"></td>
<td><img width=75
height=75 border=0 SRC="images/bluebox.gif"></td>
</tr>
</table>
A Table with Cellpadding=5
Smaller than previous example. Borders of individual cells are clear. Default
is one pixel.
<table border=1 cellspacing=0 cellpadding=5 width=150>
<tr>
<td><img width=75
height=75 border=0 SRC="images/redbox.gif"></td>
<td><img width=75
height=75 border=0 SRC="images/orangbox.gif"></td>
</tr>
<tr>
<td><img width=75
height=75 border=0 SRC="images/greenbox.gif"></td>
<td><img width=75
height=75 border=0 SRC="images/bluebox.gif"></td>
</tr>
</table>
A Table with Cellspacing of 10 and Border of 1 for a Leaded Text
List
1. |
Begin your taxes early. |
2. |
Check to insure all proper forms have
arrived. |
3. |
Get help when you don't understand |
4. |
Double-check to make sure everything is
signed. |
<table border=1 cellspacing=10 cellpadding=0 width=80%>
<tr>
<td align=right
width=20%>1.</td>
<td align=left
width=80%>Begin your taxes early.</td>
</tr>
<tr>
<td align=right
width=20%>2.</td>
<td align=left
width=80%>Check to insure all proper forms have arrived.</td>
</tr>
<tr>
<td align=right
width=20%>3.</td>
<td align=left width=80%>Get
help when you don't understand</td>
</tr>
<tr>
<td align=right
width=20%>4.</td>
<td align=left
width=80%>Double-check to make sure everything is signed.</td>
</tr>
</table>
Next: Table Borders

|
|