In the past, when doing table-based layouts, or when creating data tables in HTML, it was common to remove unnecessary padding and spacing that’s included in tables by the browser as a default.
This would be done as follows:
<table cellpadding="0" cellspacing="0">
<!-- rest of table code... -->
Code language: HTML, XML (xml)
While these features still work for backwards-compatibility reasons, and are often used in HTML email, the cellpadding
and cellspacing
attributes are now obsolete.
To correctly do cellpadding and cellspacing with CSS, you can do the following:
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 0;
}
Code language: CSS (css)
In this instance, the cellspacing
attribute is replaced by the border-collapse
and border-spacing
properties defined on the parent <table>
element. The cellpadding
is replaced by the padding
property on the <td>
element. In most cases, some padding on the table cells would make sense, so that value would likely not be set to zero.
You can see this in use in the following interactive CodePen:
If you want to include some cellspacing, then you would set border-collapse
to its default value and add a non-zero value to border-spacing
.
table {
border-collapse: separate; /* You can exclude this line, this is the default */
border-spacing: 14px;
}
td {
padding: 20px;
}
Code language: CSS (css)
This would be useful if you want “margins” on table cells, since the margin
property doesn’t work on table cells. The demo below demonstrates: