HTML : Apply cellpadding and cellspacing to table with and without using CSS

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.