CKWS Core Page
Design Tips
Example Sites
PDF Tips
css resources
Tools
Bibliography
Book Sales
Master Links
Feedback


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

Buy Creating Killer Web Sites from Amazon.com
Follow the Fish!
Core | Top | Feedback