Skip to content

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:

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
View all Snippets
Louis Lazaris
Share:

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

0
Would love your thoughts, please comment.x