How to Set Table Cell Padding and Spacing in CSS

By the end of this page, you will understand how old HTML table attributes like cellpadding and cellspacing map to modern CSS. You will learn that padding on td/th replaces cellpadding, and border-spacing on the table replaces cellspacing when border-collapse: separate is used.

HTML once allowed presentational table attributes such as cellpadding and cellspacing, but modern HTML and CSS separate structure from presentation.

• cellpadding controls the space inside each table cell.
• cellspacing controls the space between table cells.

In CSS, these are handled with different properties:

• Use padding on td and th for inner spacing.
• Use border-spacing on the table for spacing between cells.

This matters because CSS gives you:

• cleaner HTML
• easier styling across many tables
• better maintainability
• more control over layout

A key detail is that border-spacing only works when the table uses the default separated border model, or explicitly:

table {
  border-collapse: separate;
}

If you use border-collapse: collapse;, the space between cells disappears, and will not behave like .

Think of a table cell like a box:

• Padding is the space between the content and the inside edge of the box.
• Border spacing is the gap between one box and the next box.

So:

• cellpadding = space inside each box
• cellspacing = space between boxes

If the boxes are merged tightly together with border-collapse: collapse, there is no gap between them, so border-spacing cannot create visible spacing in the same way.

Basic CSS replacement

table {
  border-collapse: separate;
  border-spacing: 1px;
}

td,
th {
  padding: 1px;
}

<table class="my-table">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>28</td>
  </tr>
</table>

.my-table {
  border-collapse: separate;
  border-spacing: 1px;
}

.my-table ,
  {
  : ;
}

Consider this example:

<table class="report">
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

.report {
  border-collapse: separate;
  border-spacing: 10px;
}

.report td {
  padding: 6px;
  border: 1px solid black;
}

Step by step

1. The browser creates a table with one row and two cells.
2. border-collapse: separate; tells the browser to keep cell borders separate rather than merging them.
3. border-spacing: 10px; adds a 10-pixel gap between the two cells.
4. Each td gets padding: 6px;, so the text inside each cell is pushed 6 pixels away from the cell border.

CSS table spacing is commonly used in situations like these:

• Admin dashboards: adding readable spacing to data tables.
• Reports and invoices: controlling how tightly rows and columns appear.
• Email templates: although older HTML attributes still appear in email work, modern web pages should prefer CSS.
• Comparison tables: improving readability with padded cells.
• Data-heavy apps: making tables easier to scan without changing the HTML structure.

For example, a product table might use:

• padding to give text room inside each cell
• border-spacing to visually separate records
• border-collapse: collapse instead when a compact grid look is desired

In real projects, developers usually do not style every table globally. Instead, they target specific classes:

.user-table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.user-table td,
.user-table th {
  padding: 12px;
}

Common patterns include:

• Scoped table classes so one table style does not affect all tables
• Utility classes like .p-2 or .table-compact
• Guarding layout choices by deciding early whether the table should use collapse or separate
• Theme-based spacing where padding values come from a design system

Developers also often choose between two styles:

1. Compact grid
   • border-collapse: collapse;
   • little or no spacing between cells
2. Card-like rows
   • border-collapse: separate;
   • visible border-spacing

1. Using border-spacing with border-collapse: collapse

Broken example:

table {
  border-collapse: collapse;
  border-spacing: 10px;
}

Problem:

• border-spacing does not work as expected when borders are collapsed.

Fix:

table {
  border-collapse: separate;
  border-spacing: 10px;
}

2. Applying padding to table instead of cells

Broken example:

table {
  padding: 10px;
}

Problem:

• This adds space around the table itself, not inside each cell.

Fix:

td,
th {
  : ;
}

/* Replace cellpadding */
td,
th {
  padding: 8px;
}

/* Replace cellspacing */
table {
  border-collapse: separate;
  border-spacing: 4px;
}

Rules to remember

• cellpadding -> padding on td and th
• cellspacing -> border-spacing on table
• border-spacing needs border-collapse: separate
• border-spacing: 4px 8px; means horizontal then vertical spacing
• padding affects space inside cells
• border-spacing affects space between cells

Common patterns

/* Compact grid */
 {
  : collapse;
}

,
 {
  : ;
}

How do I set cellpadding in CSS?

Use padding on td and th elements.

td, th {
  padding: 8px;
}

How do I set cellspacing in CSS?

Use border-spacing on the table.

table {
  border-collapse: separate;
  border-spacing: 4px;
}

Why is border-spacing not working?

Usually because the table has border-collapse: collapse;. Change it to separate.

Can one CSS property replace both cellpadding and cellspacing?

No. You usually need:

• CSS padding — directly replaces cellpadding by controlling inner space.
• CSS border-spacing — directly replaces cellspacing for separated tables.
• border-collapse — determines whether table cell borders are merged or kept separate.
• CSS box model — helps explain content, padding, border, and spacing behavior.
• HTML tables — useful for understanding how table, tr, td, and th work together.
• CSS selectors — needed to target table, td, and th correctly.
• margin vs padding — helps distinguish outside spacing from inside spacing.