Cellspacing vs cellpadding - Table attributes comparison - Digizol6

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

Thursday, August 21, 2008

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.

1 comment:

  1. This is a Wonderful informative it is a very useful to me thanks dear to share such an excellent informative post.

    ReplyDelete

Post Top Ad

Responsive Ads Here