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
<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 |
|||||||||||||||||||
Core | Top | Feedback |
|||||||||||||||||||