This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
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.
This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
Rajesh Kumar Yadav | Sciencx (2021-05-29T10:26:14+00:00) HTML : Apply cellpadding and cellspacing to table with and without using CSS. Retrieved from https://www.scien.cx/2021/05/29/html-apply-cellpadding-and-cellspacing-to-table-with-and-without-using-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.