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.