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:

0 Comments
Inline Feedbacks
View all comments
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.
Back to Snippets

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)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

30 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...