Cellpadding vs Cellspacing: Key Differences & CSS Alternatives
Cellpadding is the space inside each table cell, padding the content from its borders. Cellspacing is the space between the cells themselves, acting like external margins.
Both are HTML attributes, but because they sound alike and appear in the same context, designers often type one when they mean the other, then wonder why the table still looks cramped or bloated.
Key Differences
Cellpadding lives inside the cell, controlled by the padding CSS property. Cellspacing lives outside, replaced by border-spacing on the <table> element. One affects content breathing room; the other sets the grid’s gaps.
Which One Should You Choose?
Use CSS: padding: 8px; for cellpadding, border-spacing: 4px; for cellspacing. They separate concerns, keep markup clean, and let media queries adjust spacing responsively without touching HTML.
Examples and Daily Life
Imagine a pricing table on a SaaS landing page. Tight cellpadding makes the “$99” feel squished, while zero cellspacing turns the grid into a solid brick. Tweaking both in DevTools instantly reveals the right airy feel.
Can I set cellpadding and cellspacing to zero?
Yes—padding:0 plus border-collapse:collapse; removes every gap and gives you razor-sharp lines.
Do email clients support CSS replacements?
Some still prefer the old HTML attributes, so inline cellpadding="0" cellspacing="0" remains the safest bet for newsletters.
What happens if I mix both CSS and HTML attributes?
CSS wins in browsers, but HTML attributes override in many email clients—test to avoid surprises.