Introduction

In modern HTML and CSS, you do not use the old cellpadding and cellspacing attributes to control table spacing. The CSS replacements are padding on the table cells and border-spacing on the table, with one important limitation: border-spacing works only when the table uses separate borders.

Replace cellpadding With Cell padding

The old HTML cellpadding attribute controlled the space inside each cell. In CSS, that is just the normal padding property on td and th.

1<table class="report">
2  <tr>
3    <th>Name</th>
4    <th>Score</th>
5  </tr>
6  <tr>
7    <td>Alice</td>
8    <td>98</td>
9  </tr>
10</table>

1.report td,
2.report th {
3  padding: 12px;
4}

That means the text gets breathing room inside the cell border. If you only want horizontal or vertical space, use directional padding values instead of one shorthand value.

Replace cellspacing With border-spacing

The old cellspacing attribute controlled the gap between neighboring table cells. The CSS equivalent is border-spacing on the table itself.

1.report {
2  border-collapse: separate;
3  border-spacing: 8px;
4}

You can also give separate horizontal and vertical spacing values:

1.report {
2  border-collapse: separate;
3  border-spacing: 12px 6px;
4}

The first number is horizontal spacing. The second is vertical spacing.

Why border-collapse Matters

This is the detail that causes most confusion: border-spacing has no visible effect when border-collapse: collapse is in use.

1.report {
2  border-collapse: collapse;
3  border-spacing: 10px;
4}

That rule does not create gaps, because the collapsed-border layout model removes the separate-cell spacing behavior.

So the real decision is:

• use border-collapse: separate if you want gaps between cells
• use border-collapse: collapse if you want a tight grid with shared borders

Once that is clear, the rest of the styling becomes much easier.

Example Using Both Concepts Together

A realistic table usually needs both kinds of spacing: internal padding and external cell gaps.

1<table class="pricing">
2  <tr>
3    <th>Plan</th>
4    <th>Price</th>
5  </tr>
6  <tr>
7    <td>Starter</td>
8    <td>$9</td>
9  </tr>
10  <tr>
11    <td>Pro</td>
12    <td>$29</td>
13  </tr>
14</table>

1.pricing {
2  border-collapse: separate;
3  border-spacing: 10px;
4}
5
6.pricing th,
7.pricing td {
8  padding: 14px;
9  border: 1px solid #ccc;
10}

In that example:

• 'padding adds space inside each cell'
• 'border-spacing adds space between cells'

They do different jobs, so it is normal to use both.

Modern CSS Is More Flexible Than Old HTML Attributes

The old attributes applied table-wide and were limited. CSS lets you target exactly what you want. For example, you can give header cells extra padding while keeping body cells compact.

1.report th {
2  padding: 16px 20px;
3}
4
5.report td {
6  padding: 10px 12px;
7}

That is one reason the HTML attributes became obsolete. CSS is not just the modern replacement. It is the more capable tool.

Know When To Use Tables At All

One more practical point: table spacing rules only apply when you are actually using semantic HTML tables for tabular data. Developers sometimes try to recreate layout grids with tables and then fight padding and border-spacing to achieve page-level alignment.

If the content is page layout rather than tabular data, CSS Grid or Flexbox is usually the better tool. Use table spacing rules when you really are styling a table, not when the table is standing in for a layout system.

Common Pitfalls

A frequent mistake is expecting border-spacing to work while border-collapse: collapse is active. It will not.

Another issue is confusing inside space with between-cell space. padding affects content inside a cell, while border-spacing affects the gap between cells.

Developers also sometimes put padding on the table element and expect that to behave like cellpadding. It does not. The correct target is the cells themselves.

Summary

• Use padding on td and th instead of old cellpadding.
• Use border-spacing on the table instead of old cellspacing.
• 'border-spacing works only with border-collapse: separate.'
• Padding controls internal cell space; border spacing controls gaps between cells.
• CSS gives you much finer control than deprecated HTML table attributes.