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.