How to Set Cellpadding and Cellspacing in CSS

How to Set Cellpadding and Cellspacing in CSS – A Quick Guide for Better Tables

Remember the good old days of HTML when you could just throw in cellpadding and cellspacing attributes to style your tables? Well, those days are over. Modern web design has moved on, and CSS is now the go-to for styling. But don’t worry – setting cellpadding and cellspacing in CSS is just as easy (if not easier)!

In this guide, we’ll show you how to replace those outdated HTML attributes with clean, modern CSS. Whether you’re a beginner or a seasoned developer, you’ll be styling tables like a pro in no time. Let’s dive in!

What Are Cellpadding and Cellspacing?

Before we jump into the CSS, let’s quickly recap what these terms mean:

• Cellpadding: The space between the content of a table cell and its border.
• Cellspacing: The space between table cells.

In the old days, you’d use HTML attributes like this:

<table cellpadding="10" cellspacing="5">  
  <!-- Table content -->  
</table>  

But now, CSS is the way to go.

How to Set Cellpadding in CSS

To replicate cellpadding, you can use the padding property on table cells (<td> and <th>).

HTML:

<table>  
  <tr>  
    <td>Cell 1</td>  
    <td>Cell 2</td>  
  </tr>  
</table>  

CSS:

td, th {  
  padding: 10px; /* Adds 10px of space inside each cell */  
}  

What’s Happening Here?
The padding property adds space inside the cells, creating the same effect as the old cellpadding attribute.

How to Set Cellspacing in CSS

To replicate cellspacing, you can use the border-spacing property on the <table> element.

CSS:

table {  
  border-spacing: 5px; /* Adds 5px of space between cells */  
}  

What’s Happening Here?
The border-spacing property adds space between the cells, mimicking the old cellspacing attribute.

Combining Cellpadding and Cellspacing

Want to set both at the same time? No problem! Here’s how:

CSS:

table {  
  border-spacing: 5px; /* Cellspacing */  
}  

td, th {  
  padding: 10px; /* Cellpadding */  
}  

Bonus Tip: Remove Cellspacing Entirely

If you want your table cells to touch each other (no spacing at all), use border-collapse: collapse instead of border-spacing.

CSS:

table {  
  border-collapse: collapse; /* Removes space between cells */  
}  

td, th {  
  padding: 10px; /* Adds padding inside cells */  
}  

Why It’s Useful:
This is great for creating sleek, compact tables where cells share borders.

Final Thoughts

Styling tables with CSS is not only more modern but also more flexible than using outdated HTML attributes. With just a few lines of CSS, you can control cellpadding, cellspacing, and even create borderless designs.

So, the next time you’re working on a table, ditch the old-school attributes and embrace the power of CSS. Your tables (and your code) will thank you!