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

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.

Look at the diagram to clarify this further.

Following is a simple code example to demonstrate the difference.

<table cellspacing="15px" cellpadding="20px"  
                               style="background:#8df981;">
    <tr>
        <td bgcolor="#0500fa">
            <div style="background:#FFFFFF;">cell content</div>
        </td>
        <td bgcolor="#0500fa">
            <div style="background:#FFFFFF;">cell content</div>
        </td>
    </tr>
</table>

cell content

cell content

 * : is from cellspacing
 * : is from cellpadding

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 blue sections are the spaces created with cellpadding; the space in white is available for the content in table cell.

Share this article please, on :

Share on fb Tweet Share on G+