Add space between cells (td) using css

Demystifying table spacing methods

Padding, margin, and border-spacing: What's the difference?

A fundamental understanding of padding, margin, and border-spacing will render you a master of table aesthetics:

• padding is that comfy space within the cell. Like how your couch cushions your tush.
• margin is pretty anti-social when it comes to tables. You won't see them in the likes of <td>.
• border-spacing is your trusty tool to space out cell borders. It's a top-notch method...unless you've got border-collapse: collapse. They kinda hate each other.

Taking care of older brothers: IE7 and below

border-spacing might be your new best friend but IE7 and below haven't quite warmed up to it. Use the cellspacing attribute on your <table> tag when dealing with these folks. It's less flexible but it mimics border-spacing quite well:

<table cellspacing="10">
  <!-- Your amazing table content -->
</table>


Keep that color scheme intact!

border-spacing not only adds some roomy goodness, but also lets your cell backgrounds flaunt their color:

td {
  background-color: blue; /* Ain't no space gonna take away my flare! 💁‍♂️ */
}


Making the perfect table layout

Spacing in style with border-spacing

border-spacing isn't just about adding space; with it, you can define horizontal and vertical spacing separately. Quite crafty, isn't it?

table {
  border-spacing: 10px 5px; /* This is horizontal and vertical spacing being besties 🤝 */
}


Blending aesthetics with padding

Mix border-spacing and padding for an even more refined dining...I mean, design experience:

td {
  padding: 2px 8px 2px 8px; /* Balanced diet...oops...design! */
}


Dealing smartly with older browsers

Older browsers can be grumpy. Try this for IE7 and below and see their mood lighten up:

<!--[if lt IE 8]>
<style>
  table {
    /* Fallback styles in case of a "grumpy old man browser" situation. 🧓 */
  }
</style>
<![endif]-->
