How to Set Table Cell Padding and Spacing in CSS

By the end of this page, you will understand how old table attributes like cellpadding and cellspacing map to modern CSS. You will learn which CSS properties to use, how they behave, and how to style tables correctly in real projects.

HTML used to allow presentational table attributes such as cellpadding and cellspacing. These controlled:

• cellpadding: the space inside each table cell, between the cell content and its border
• cellspacing: the space between table cells

In modern web development, presentation should be handled with CSS, not HTML attributes.

The CSS replacements are:

• Use padding on td and th for cellpadding
• Use border-spacing on table for cellspacing

There is one important detail: border-spacing only works when the table uses:

table {
  border-collapse: separate;
}

If a table uses border-collapse: collapse, the borders are merged together and border-spacing has no effect.

This matters because real codebases usually separate content structure (HTML) from visual appearance (CSS). That makes styling easier to maintain, reuse, and update.

Think of a table like a set of boxes arranged in a grid:

• padding is the cushion inside each box
• border-spacing is the gap between boxes

So:

• Want text to sit farther from the cell edge? Use padding.
• Want cells to sit farther apart from each other? Use border-spacing.

A useful way to remember it:

• Inside the cell → padding
• Between the cells → border-spacing

Basic CSS replacement

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

td, th {
  padding: 1px;
}

This is the CSS equivalent of:

<table cellspacing="1" cellpadding="1">

Full example

<table class="demo-table">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>31</td>
  </tr>
</table>

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

.demo-table th,
.demo-table td {
  padding: 12px;
  border: 1px solid #999;
}

What this does

• border-spacing: 8px; adds space between cells
• padding: 12px; adds inner space inside each cell
• border-collapse: separate; allows cell spacing to work

Horizontal and vertical spacing

You can set different values for horizontal and vertical spacing:

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

This means:

• 12px horizontal spacing
• 6px vertical spacing

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;
}

What happens step by step

1. The browser creates a table with one row and two cells.
2. Each td gets a 1px border.
3. Each td gets padding: 6px.
   • This pushes the text away from the border inside the cell.
   • So Hello and World have breathing room.
4. The table gets border-collapse: separate.
   • This tells the browser to keep cell borders separate.
5. The table gets border-spacing: 10px.
   • The browser places a 10px gap between the cells.
6. Final result:
   • The text is not touching cell edges because of padding
   • The cells are not touching each other because of border-spacing

Visual idea

• padding affects the inside of each cell
• border-spacing affects the distance between cells

Admin dashboards

Tables showing users, orders, or reports often need readable spacing. Padding makes data easier to scan, and border spacing can create a less cramped design.

Pricing or comparison tables

Cells often need generous internal spacing so headings and values do not feel crowded.

Email-like data layouts

Some internal tools still render tabular data. Controlled cell padding improves readability.

Export previews and reporting tools

Financial or analytics tables often need precise spacing for legibility.

CMS and legacy project modernization

Older HTML may still use cellpadding and cellspacing. Replacing them with CSS helps standardize styling and makes updates easier.

In real projects, developers usually avoid styling all tables globally unless the project is very small. Instead, they target a specific class:

.data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th,
.data-table td {
  padding: 0.75rem;
}

Common patterns include:

• Scoped table classes: prevent accidental styling of every table on the site
• Design-system spacing tokens: use consistent values like 0.5rem, 1rem, or CSS variables
• Responsive tables: combine padding with overflow-x: auto on small screens
• Header styling: use larger padding in th than td
• Guarding layout rules: use border-collapse: collapse for tight grid tables, or separate when visual spacing is needed

Example with CSS variables:

:root {
  --table-cell-padding: 12px;
  --table-cell-gap: 4px;
}

.data-table {
  border-collapse: separate;
  border-spacing: var(--table-cell-gap);
}

.data-table th,
.data-table td {
  padding: var(--table-cell-padding);
}

This makes spacing easier to update across a whole application.

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

Broken example:

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

Why it fails:

• border-spacing does not work 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;
}

Why it fails:

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

Fix:

td, th {
  padding: 10px;
}

3. Expecting margin on td to create cell spacing

Broken example:

td {
  margin: 10px;
}

Why it fails:

• Table cells do not behave like normal block elements for margin spacing.

Fix:

• Use border-spacing on the table

4. Styling all tables unintentionally

Broken example:

table {
  border-spacing: 12px;
}

Why it can be a problem:

• Every table on the page may change, including third-party or admin tables.

Fix:

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

5. Forgetting that th also needs padding

If only td is styled, table headers may look cramped.

Better approach:

td, th {
  padding: 10px;
}

cellpadding vs padding, cellspacing vs border-spacing

border-spacing vs padding

border-collapse: separate vs collapse

Example comparison

/* Spaced-out cells */
.table-a {
  border-collapse: separate;
  border-spacing: 8px;
}

/* Tight grid */
.table-b {
  border-collapse: collapse;
}

Quick mapping

<table cellspacing="1" cellpadding="1">

becomes:

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

td, th {
  padding: 1px;
}

Rules to remember

• cellpadding → padding on td and th
• cellspacing → border-spacing on table
• border-spacing only works with border-collapse: separate
• margin does not create spacing between table cells
• Use table classes to avoid changing every table globally

Common syntax

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

td, th {
  padding: 8px;
}

Different horizontal and vertical spacing

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

Tight table layout

table {
  border-collapse: collapse;
}

Use this when you do not want spacing between cells.

How do I replace cellpadding in CSS?

Use padding on td and th.

td, th {
  padding: 8px;
}

How do I replace cellspacing in CSS?

Use border-spacing on the table, and make sure border-collapse is set to separate.

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

Why is border-spacing not working?

The most common reason is that the table has border-collapse: collapse;. Change it to separate.

Can I use different spacing horizontally and vertically?

Yes.

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

Should I still use cellpadding and cellspacing in HTML?

In modern code, CSS is preferred because it separates structure from presentation.

Does padding on table do the same thing as cellpadding?

No. padding on table affects the table element itself, not the inside of each individual cell.

Can I use margin on td instead of border-spacing?

Not reliably. For spacing between table cells, use border-spacing.

padding

Controls inner space inside an element, which is the direct CSS replacement for cellpadding.

margin

Controls outer space around normal elements, but it does not replace table cell spacing.

border-collapse

Determines whether table cell borders are merged or kept separate, which affects border-spacing.

th and td

These are the table cell elements that usually receive padding styles.

CSS selectors

Useful for targeting only specific tables or specific cells in a project.

Box model

Helps explain how content, padding, border, and spacing affect layout.

HTML tables

Understanding table structure makes CSS table styling easier.