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 has no effect.

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>
  </>
  
    Bob
    31
  

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 have breathing room.

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

 {
  : separate;
  : (--table-cell-gap);
}

 ,
  {
  : (--table-cell-padding);
}

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

cellpadding vs padding, cellspacing vs border-spacing

border-spacing vs padding

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

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.

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.