Table Cellpadding and Cellspacing with CSS

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: