What is Cellpadding?

Cellpadding - Sets the amount of space between the contents of the cell and the cell wall

What is Cellspacing?

Cellspacing - Controls the space between table cells

Old school way of setting cellpadding and cellspacing is like this:

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

But there are various way to achieve the same.

Method 1

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

 td { padding: 10px; } 

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

 table { border-spacing: 10px; border-collapse: separate; } 

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Method 2

The default behavior of the browser is equivalent to:

 table {border-collapse: collapse;} td {padding: 0px;} 

Set Cellpadding

To set this we need set the padding to td

 table {border-collapse: collapse;} td {padding: 6px;} 

So that it will look like as -

Set Cellspacing

To set this we need to set border-spacing to table

 table {border-spacing: 2px;} td {padding: 0px;} 

So that it will look like as -

Setting Cellspacing and Cellspacing both

 table {border-spacing: 8px 2px;} td {padding: 6px;} 

So that it will look like as -

 table {border-spacing: 2px;} td {padding: 6px;} 

So that it will look like as -

Summary

 table { border-collapse: collapse; /* 'cellspacing' equivalent */ } table td, table th { padding: 0; /* 'cellpadding' equivalent */ } 

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.