Difference between Cell-Spacing and Cell-Padding

Very often, we come across two widely used terms: Cellspacing and Cellpadding while using CSS for adjusting spaces among cells in table. Many times, we get confused what is the actual difference between the two. So, let’s take an example to understand the small but tricky difference between the two ;)

Let’s make a simple table having 4 cells

TABLE 1:

<table border="1">
<tr>
<td>TEXT 1</td>
<td> TEXT 2</td>
</tr>

<tr>
<td> TEXT 3</td>
<td> TEXT 4</td>
</tr>
</table>

TEXT 1	TEXT 2
TEXT 3	TEXT 4

Now let’s add cellspacing to it and see what happens

TABLE 2:

<table border="1" cellspacing="10">
<tr>
<td> TEXT 1</td>
<td> TEXT 2</td>
</tr>

<tr>
<td> TEXT 3</td>
<td> TEXT 4</td>
</tr>
</table>

TEXT 1	TEXT 2
TEXT 3	TEXT 4

Did you notice the difference??

Yes, you are correct, the content of the table spreads out.

So, if you need to add space between the cells of the table you should add cellspacing to it. By default, the value of cellspacing is zero. It is the pixel width between the individual data cells in the table.

Cellspacing is used when you want the cells of a table to be bit away from each other so that their text can be easily differentiated.

Now let’s understand what cellpadding is. We will add cellpadding to our TABLE 1 and see what happens.

TABLE 3:

<table border="1" cellpadding="10">
<tr>
<td> TEXT 1</td>
<td> TEXT 2</td>
</tr>

<tr>
<td> TEXT 3</td>
<td> TEXT 4</td>
</tr>
</table>

TEXT 1	TEXT 2
TEXT 3	TEXT 4

See the difference. Let’s now elaborate it.

Cellpadding is the pixel space between the cell content and the cell border. By default, the value of cellpadding is zero.

Cellpadding is used when you have borders being turned on and you want the content of the cell to be "away" from the border a bit so that it can be easily viewed.

Both cellspacing and cellpadding can be used together.

TABLE 4:

<table border="1" cellspacing="10" cellpadding="10">

<tr>

<td>TEXT 1</td>

<td> TEXT 2</td>

</tr>

<tr>

<td> TEXT 3</td>

<td> TEXT 4</td>

</tr>

</table>

TEXT 1	TEXT 2
TEXT 3	TEXT 4

Let’s summarize. In case of cellspacing, we get spacing outside the border of each cell but in case of cellpadding we get spacing around the text of the cell, inside the cell border.

1. Cellspacing is an attribute of Table
2. Cellpadding is an attribute of Cell

Hope that’s useful to you. J