Cellspacing vs cellpadding - Table attributes comparison

In HTML Tables (<table>) there are two attributes named, cellpadding and cellspacing. What is the different between cellpadding and cellspacing? Both these are capable of creating some empty space inside a table.

cellspacing : space between cells
cellpadding : space between the cell border and it's content

Look at the diagram to clarify this further. As the word "cellspacing" suggests, it denotes the spacing between cells; it is something easy to remember. "cellpadding" keyword can be considered in relation to the "padding" attribute in HTML/CSS; padding is used to denote the space between the content and border of box type elements.

Following is a simple code example to demonstrate the difference.

<table cellspacing="15px" cellpadding="20px" bgcolor="#00EE00" width="300px">
     <tr>
        <td bgcolor="#339966">
            <div style="background:#FFFFFF;">Cell 1 content</div>
        </td>
        <td bgcolor="#339966">
            <div style="background:#FFFFFF;">Cell 2</div>
        </td>
    </tr>
</table>

Cell 1

Cell 2

Check the difference. We have set the table background to light green color, so all the cellspacing is viewed in light green as it is the space between cells. The dark green sections are the spaces created with cellpadding; the space in white is available for the content in table cell.

Margin Vs Padding - CSS Properties

CSS provides two properties named margin and padding for keeping space between HTML Box type elements. But why do we have two properties for the same reason? Are they similar?
No. They have a main difference.
Padding - defines space between border and element content
Margin - defines space between border and other outer elements
(Look at the above diagram)

So when elements needs space between them, better to use margins. When text or an inner element needs space between the parent box and itself go for paddings.

Look at this example for visual clarification generated with this code.

<div style="margin:25px; background:#cccccc; border:#000000 2px dashed;">
    Text inside element
</div>
<div style="padding:25px; background:#cccccc; border:#000000 2px dashed;">
    Text inside element
</div>

Text inside element

Text inside element

In the first <div>, space is set between the border and outside elements but in the second one it is between the boder and text.

Hope this will help.