HTML CSS IMAGES LINKS
 
HTML → Cellpadding and cellspacing

Here is a simple table:

Cell ONE Cell TWO
Cell THREE Cell FOUR

And here's the code:

<table border="0">
<tr>
<td>Cell ONE</td>
<td>Cell TWO</td>
</tr>
<tr>
<td>Cell THREE</td>
<td>Cell FOUR</td>
</tr>
</table>

Now let's add cellpadding to the table and look at the change:

Cell ONE Cell TWO
Cell THREE Cell FOUR

Notice how the words have more space around them?

That is the effect of CELLPADDING, and here is the code:

<table border="1" cellpadding="10">
<tr>
<td>Cell ONE</td>
<td>Cell TWO</td>
</tr>
<tr>
<td>Cell THREE</td>
<td>Cell FOUR</td>
</tr>
</table>

Now let's try CELLSPACING and look at the change:

Cell ONE Cell TWO
Cell THREE Cell FOUR

Notice how the words have almost no space around them, but the gaps between the cells are wider?

That is the effect of CELLSPACING, and here is the code:

<table border="1" cellspacing="10">
<tr>
<td>Cell ONE</td>
<td>Cell TWO</td>
</tr>
<tr>
<td>Cell THREE</td>
<td>Cell FOUR</td>
</tr>
</table>


The two attributes may be combined:

Cell ONE Cell TWO
Cell THREE Cell FOUR

<table border="1" cellspacing="10" cellpadding="5">
<tr>
<td>Cell ONE</td>
<td>Cell TWO</td>
</tr>
<tr>
<td>Cell THREE</td>
<td>Cell FOUR</td>
</tr>
</table>


You may also set a table's cellpadding/cellspacing to equal zero:

Cell ONE Cell TWO
Cell THREE Cell FOUR


 
  back ↑