Member Avatar for Sherin Mathew

Explain CellSpacing and Cellpadding?

  • 4 Contributors
  • 3 Replies
  • 298 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Good, concise answers above from and ; is right to push for CSS. The replies cover the basics, so this note focuses on practical, modern guidance for replacing those legacy attributes and avoiding common pitfalls when you migrate or build new tables.

Use CSS for both kinds of spacing and be aware of the border model: inner cell spacing belongs on the cell (use padding), while the gap between cells is controlled by border-spacing — but only when the table uses border-collapse: separate. If you use border-collapse: collapse (common when you want single shared borders), border-spacing is ignored and you’ll need different techniques (for example, cell borders plus background, or using outline/box-shadow to simulate gaps).

Example styles to replace legacy attributes:

table {
  border-collapse: separate;
  border-spacing: 12px;   /* gap between cells */
  margin: 0;              /* table outer spacing */
}

td, th {
  padding: 10px 12px;     /* inner cell spacing */
  border: 1px solid #ddd;
}

/* If you prefer collapsed borders */
table.collapse { border-collapse: collapse; }

Troubleshooting tips:

  • When migrating legacy HTML, a search-and-replace converts cellspacing="N" → table { border-spacing: Npx; } and cellpadding="N" → td, th { padding: Npx; }.
  • If you need gaps with border-collapse: collapse, consider changing to separate or simulate gaps with adjacent borders/outline — test on your target browsers.
  • For HTML email or very old clients, inline styles or keeping attributes might be necessary; for web apps use external CSS, keep semantic tables for tabular data, and ensure adequate padding for touch targets and accessibility.

Recommended Answers

All 3 Replies

Member Avatar for Purvi_1

CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2.
CELLPADDING sets the amount of space between the contents of the cell and the cell wall. The default is 1.

CELLPADDING is usually more effective than CELLSPACING for spreading out the contents of the table.

Member Avatar for anand9796

Hi,
The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content.
The cellspacing attribute specifies the space, in pixels, between cells.

Member Avatar for Dani

Don't use table cellpadding and cellspacing HTML attributes. Use CSS padding and margin instead.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.