Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Lists
Basic Tables
Table basics
Rows and data
Borders
Width
Cellpadding & spacing
Alignment
Rowspan & colspan
You Try It
Advanced Text
Marquee
Meta
Sounds
Comments
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices
|
Cell Padding and Spacing
TAGS USED: < table cellpadding="" cellspacing="">
Now that you've learned to control the borders of your table and the size it is on a page, you are ready to learn how to control the "white speace" around the items on your table. This is done through "cell padding" and "cell spacing." Both of these commands are found withing the <table> tag.
Cell padding is how much space is found between the data in the cell and the border of the cell. I'll show you two examples of how this looks. Because it will be easier to see with a picture than with text, I'll use a cute one. Everyone likes monkeys, right?
| Code |
|---|
<table border=1 cellpadding=10>
<tr>
<td>
<img src="hapmonk.jpg">
</td>
<td>
<img src="hapmonk.jpg">
</td>
</tr>
<tr>
<td><img src="hapmonk.jpg">
</td>
<td><img src="hapmonk.jpg">
</td>
</tr>
</table>
|
|
|
|
Notice the space between the pictures of the monkeys and the border. That is cell padding. Think of it as a pad , or a cushion, between the data and the border. You can reduce this to zero if you'd like.
| Code |
|---|
<table border=1 cellpadding=0>
<tr>
<td>
<img src="hapmonk.jpg">
</td>
<td>
<img src="hapmonk.jpg">
</td>
</tr>
<tr>
<td><img src="hapmonk.jpg">
</td>
<td><img src="hapmonk.jpg">
</td>
</tr>
</table>
|
|
|
There is another way to provide space between cells on a table. This is called cell spacing. This is also contained within the <table> command. Cell spacing tells the computer how much space to put between cells. Here's an example with the monkeys:
| Code |
|---|
<table border=1 cellspacing=10>
<tr>
<td>
<img src="hapmonk.jpg">
</td>
<td>
<img src="hapmonk.jpg">
</td>
</tr>
<tr>
<td><img src="hapmonk.jpg">
</td>
<td><img src="hapmonk.jpg">
</td>
</tr>
</table>
|
|
|
Notice how the monkeys are tight inside the border, but the space between cells is increased. These commands can be used in tandem to modify your table. Here's one of my favorite ways:
| Code |
|---|
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<img src="hapmonk.jpg">
</td>
<td><img src="hapmonk.jpg">
</td>
</tr>
<tr>
<td><img src="hapmonk.jpg">
</td>
<td><img src="hapmonk.jpg">
</td>
</tr>
</table>
|
|
|
|
