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.
Top comments (0)