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 border-spacing will not behave like cellspacing.

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 td,
.my-table th {
  padding: 1px;
}

What this does

• border-spacing: 1px; adds 1 pixel of space between neighboring cells.
• padding: 1px; adds 1 pixel of space inside each cell.

Different horizontal and vertical spacing

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

This means:

• 4px horizontal spacing
• 8px vertical spacing

Common modern table styling

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

td,
th {
  padding: 8px 12px;
  border: 1px solid #ccc;
}

This setup removes gaps between cells while keeping comfortable padding inside them.

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.
5. The border: 1px solid black; makes the cell boundaries visible.

Result

• The words Hello and World are not touching the borders because of padding.
• The two cells are not touching each other because of border-spacing.

That is the CSS equivalent of using both cellpadding and cellspacing.

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
   • more padding inside cells

So the exact CSS depends on whether the UI should look dense or spacious.

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 {
  padding: 10px;
}

3. Expecting cellpadding and cellspacing behavior from one CSS property

There is no single CSS property that replaces both.

• padding handles inner cell space
• border-spacing handles gaps between cells

4. Forgetting th elements

Broken example:

td {
  padding: 8px;
}

Problem:

• Header cells may look different because th is not included.

Fix:

td,
th {
  padding: 8px;
}

5. Styling every table on the site unintentionally

Risky example:

table {
  border-spacing: 10px;
}

Problem:

• This may affect layout in places you did not intend.

Fix:

.orders-table {
  border-spacing: 10px;
}

border-collapse: separate vs collapse

Old HTML vs CSS

/* 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 */
table {
  border-collapse: collapse;
}

td,
th {
  padding: 6px;
}

/* Spacious table */
table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

td,
th {
  padding: 12px;
}

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:

• padding for inside the cells
• border-spacing for between the cells

Should I still use cellpadding and cellspacing in HTML?

For modern web development, no. CSS is the recommended approach.

Does padding on table affect cell content?

No. It affects the table element itself, not the inside of each cell.

Can I set different horizontal and vertical cell spacing?

Yes.

table {
  border-spacing: 6px 12px;
}

• 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.