HTML Table Padding & Spacing: Complete Guide with Examples

Learn HTML table padding and spacing with easy CSS examples. Understand padding, border-spacing, border-collapse, cellpadding, cellspacing, and best practices.

By /

HTML Table Padding & Spacing

HTML tables are used to display information in rows and columns. A well-designed table should not only contain correct data but should also be easy to read. Table padding and spacing play an important role in making a table clean, organized, and comfortable to read.

In modern HTML, padding and spacing are mainly controlled with CSS. HTML provides the table structure, while CSS controls its appearance, including the space inside and between table cells.

This article explains HTML table padding and spacing, their differences, CSS properties, examples, common mistakes, and best practices.

What Is Table Padding in HTML?

Table padding is the space between the content of a table cell and the cell’s border.

For example, if a cell contains the word Apple, padding creates extra space around the word inside the cell.

Consider this basic table:

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>₹100</td>
  </tr>
</table>

Without padding, the text can appear very close to the cell borders.

CSS can be used to add padding:

th, td {
  padding: 10px;
}

Now each cell has 10 pixels of space between its content and its border.

What Is Table Spacing?

Table spacing generally refers to the space between individual table cells.

In CSS, this is controlled primarily by the border-spacing property.

Example:

table {
  border-spacing: 10px;
}

This creates space between adjacent table cells.

Padding and spacing are therefore different:

  • Padding creates space inside a cell.
  • Border spacing creates space between cells.

Understanding this difference is important when designing HTML tables.

Padding vs Spacing

The easiest way to understand the difference is to imagine each table cell as a small box.

Padding is the empty area inside the box around its content.

Spacing is the empty area between neighboring boxes.

For example:

td {
  padding: 12px;
}

table {
  border-spacing: 8px;
}

Here, each cell has 12 pixels of internal space, while neighboring cells have 8 pixels of separation.

How to Add Padding to HTML Table Cells

The recommended modern method is to use CSS.

<style>
  th, td {
    padding: 10px;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>28</td>
  </tr>
</table>

The padding property adds space on all four sides of the cell content.

Using Different Padding Values

CSS allows you to control each side separately.

td {
  padding: 10px 15px;
}

This means:

  • Top and bottom: 10px
  • Left and right: 15px

You can also use four values:

td {
  padding: 5px 10px 15px 20px;
}

The order is:

  1. Top
  2. Right
  3. Bottom
  4. Left

This follows the CSS clockwise pattern.

Using Individual Padding Properties

You can also specify each side independently.

td {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

This gives you precise control over the cell’s internal spacing.

Using border-spacing

The CSS border-spacing property controls the distance between table cells when the table uses separated borders.

Example:

table {
  border-spacing: 10px;
}

Complete example:

<style>
  table {
    border-spacing: 10px;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>₹250</td>
  </tr>
  <tr>
    <td>Pen</td>
    <td>₹20</td>
  </tr>
</table>

The cells will have visible gaps between them.

Horizontal and Vertical Table Spacing

border-spacing can accept one or two values.

With one value:

table {
  border-spacing: 10px;
}

The horizontal and vertical spacing are both 10px.

With two values:

table {
  border-spacing: 15px 8px;
}

The first value controls horizontal spacing.

The second value controls vertical spacing.

Therefore:

border-spacing: horizontal vertical;

In the example above:

  • Horizontal spacing = 15px
  • Vertical spacing = 8px

Padding and border-spacing Together

Padding and spacing can be used together.

table {
  border-spacing: 8px;
}

th, td {
  padding: 12px;
}

Here:

  • padding creates space inside each cell.
  • border-spacing creates space between cells.

This can produce a spacious and easy-to-read table.

What Is the cellpadding Attribute?

Older HTML examples often use the cellpadding attribute.

For example:

<table cellpadding="10">

This was traditionally used to add space inside table cells.

However, cellpadding is obsolete in modern HTML. CSS should be used instead.

Use:

th, td {
  padding: 10px;
}

rather than:

<table cellpadding="10">

CSS provides better control and keeps presentation separate from HTML structure.

What Is the cellspacing Attribute?

Older HTML also used the cellspacing attribute.

Example:

<table cellspacing="10">

It was used to control the space between cells.

This is also an obsolete approach for modern HTML.

Use CSS instead:

table {
  border-spacing: 10px;
}

Modern web development should generally use CSS for table presentation.

border-collapse and Table Spacing

The border-collapse property has an important effect on table borders and spacing.

There are two commonly used values:

border-collapse: separate;

and:

border-collapse: collapse;

The default table border model is separate.

With separated borders, border-spacing can create space between cells.

Example:

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

With collapsed borders:

table {
  border-collapse: collapse;
}

The borders of adjacent cells are combined into a single border.

In the collapsed-border model, border-spacing does not have the same visual effect because the cells no longer have separated borders.

Padding With Collapsed Borders

A common table design is:

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid #999;
  padding: 10px;
}

This creates a compact table with clear borders and comfortable internal spacing.

For many traditional data tables, this is a good starting point.

A Complete Table Padding Example

Here is a simple example:

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid #999;
      padding: 12px;
    }
  </style>
</head>
<body>

  <table>
    <tr>
      <th>Name</th>
      <th>Course</th>
      <th>Score</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>HTML</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Anita</td>
      <td>CSS</td>
      <td>95</td>
    </tr>
  </table>

</body>
</html>

The padding: 12px makes the content easier to read.

Creating a Spacious Table

If you want visible gaps between cells, use separated borders:

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

th, td {
  padding: 10px;
  border: 1px solid #999;
}

This creates both internal padding and external cell spacing.

Creating a Compact Table

Sometimes tables need to fit a large amount of information into a small area.

You can reduce padding:

th, td {
  padding: 5px;
}

For example:

table {
  border-collapse: collapse;
}

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

This creates a more compact design.

However, extremely small padding can make a table difficult to read, especially on mobile devices.

How Much Table Padding Should You Use?

There is no single correct padding value for every table.

A practical starting point is around 8px to 16px, depending on the design.

For example:

th, td {
  padding: 10px 12px;
}

For a dense data table:

th, td {
  padding: 6px 8px;
}

For a spacious table:

th, td {
  padding: 14px 16px;
}

The correct value depends on font size, screen size, amount of content, and overall design.

Padding for Table Headers

Table headers often benefit from slightly more padding than regular cells.

Example:

th {
  padding: 12px 16px;
}

td {
  padding: 10px 16px;
}

This can visually distinguish the header from the body.

You can also combine padding with background styling:

th {
  padding: 12px;
  background: #f2f2f2;
}

Vertical Alignment and Padding

Padding can affect the visual position of content inside cells.

You can also use vertical-align:

td {
  padding: 12px;
  vertical-align: middle;
}

Common values include:

vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

For cells containing long text, top alignment can sometimes improve readability:

td {
  vertical-align: top;
}

Horizontal Alignment

Padding works together with horizontal text alignment.

Example:

th, td {
  padding: 10px;
}

th {
  text-align: left;
}

For numeric data, right alignment can sometimes make values easier to compare:

td.number {
  text-align: right;
}

Example:

<td class="number">1250</td>

Padding Does Not Mean Margin

A common mistake is confusing padding with margin.

Padding is space inside an element.

Margin is space outside an element.

For table cells, padding is the normal way to create space between the cell content and its border.

For example:

td {
  padding: 10px;
}

Using margins on table cells is generally not the appropriate method for creating table-cell spacing.

Table Width and Padding

Padding contributes to the size of table cells and can affect how content fits.

For example:

table {
  width: 100%;
}

th, td {
  padding: 20px;
}

Large padding can make a table wider or force content to wrap.

This becomes especially important when designing tables for small screens.

Responsive Tables and Padding

Large cell padding may look good on a desktop computer but can consume valuable screen space on mobile devices.

A responsive design can reduce padding on smaller screens.

th, td {
  padding: 12px 16px;
}

@media (max-width: 600px) {
  th, td {
    padding: 8px;
  }
}

This keeps the table more compact on smaller screens.

Using Relative Units for Padding

Instead of always using pixels, CSS supports relative units such as rem.

Example:

th, td {
  padding: 0.75rem 1rem;
}

Using rem can make spacing more consistent with the website’s typography.

For example:

html {
  font-size: 16px;
}

th, td {
  padding: 0.75rem 1rem;
}

This corresponds to 12px vertical padding and 16px horizontal padding when the root font size is 16px.

Table Padding With CSS Classes

You do not always need to apply the same padding to every table.

You can create reusable classes:

<table class="compact-table">


.compact-table th,
.compact-table td {
  padding: 6px 8px;
}

Another table can use:

<table class="spacious-table">


.spacious-table th,
.spacious-table td {
  padding: 14px 18px;
}

This approach gives you better control over different table designs.

Styling Specific Rows or Cells

You can also apply different padding to specific elements.

For example:

th {
  padding: 14px;
}

td {
  padding: 10px;
}

td.description {
  padding: 15px 20px;
}

HTML:

<td class="description">
  This is a longer product description.
</td>

This can be useful when certain cells contain more content.

Using border-spacing With Table Backgrounds

When using separated borders, the space between cells can reveal the table’s background.

Example:

table {
  border-collapse: separate;
  border-spacing: 6px;
  background: #eee;
}

th, td {
  padding: 10px;
  background: white;
}

This can create a card-like table appearance.

Padding vs border-spacing: Example

Consider:

table {
  border-spacing: 10px;
}

td {
  padding: 10px;
}

There are two different types of empty space.

The padding creates space:

| border [ content ] border |

The border-spacing creates space:

| cell |     gap     | cell |

This distinction makes table styling much easier to understand.

For a clean general-purpose table, you can use:

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: left;
}

This is simple, readable, and easy to maintain.

Example With Header and Row Styling

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 12px 15px;
  }

  th {
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>Country</th>
    <th>Capital</th>
    <th>Currency</th>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
    <td>Indian Rupee</td>
  </tr>
  <tr>
    <td>Japan</td>
    <td>Tokyo</td>
    <td>Yen</td>
  </tr>
</table>

Here, padding creates comfortable space inside every cell.

Common Mistakes With HTML Table Padding and Spacing

Using cellpadding in New Projects

Old HTML tutorials may show:

<table cellpadding="10">

For modern websites, use CSS:

td {
  padding: 10px;
}

Using cellspacing Instead of CSS

Avoid:

<table cellspacing="10">

Use:

table {
  border-spacing: 10px;
}

Confusing Padding With Spacing

Remember:

td {
  padding: 10px;
}

controls internal cell space.

Whereas:

table {
  border-spacing: 10px;
}

controls the separation between cells when using the separated border model.

Using Too Much Padding

Very large padding can make tables unnecessarily tall and wide.

For example:

td {
  padding: 50px;
}

may waste considerable space.

Use padding according to the content and design.

Using Too Little Padding

This can make text appear crowded:

td {
  padding: 1px;
}

A small amount of extra space often makes a major difference in readability.

Forgetting Mobile Users

A table with large padding may become difficult to view on small screens.

Consider responsive CSS when your table contains many columns or long content.

HTML Table Padding and Spacing Best Practices

Follow these practices for better table design:

  1. Use CSS instead of obsolete HTML presentation attributes.
  2. Use padding for space inside cells.
  3. Use border-spacing for space between cells.
  4. Use border-collapse: collapse when you want connected borders.
  5. Use border-collapse: separate when you want visible gaps between cells.
  6. Choose padding based on content and screen size.
  7. Avoid excessive spacing that makes tables unnecessarily large.
  8. Make tables responsive when they contain many columns.
  9. Keep header and body spacing visually consistent.
  10. Use semantic table elements such as <thead>, <tbody>, <th>, and <td> where appropriate.

Semantic HTML and Table Spacing

Padding and spacing should not replace good HTML structure.

A well-structured table can look like this:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Rahul</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Anita</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

CSS:

table {
  border-collapse: collapse;
  width: 100%;
}

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

This separates content structure from presentation.

Why Table Padding Matters

Proper padding provides several benefits.

Better Readability

Space around text makes data easier to scan.

Better Visual Organization

Padding separates the content from borders and nearby elements.

Better User Experience

Comfortable spacing makes tables less tiring to read.

Better Responsive Design

Carefully chosen padding can help balance readability and available screen space.

Better Visual Hierarchy

Different padding values can help distinguish headers, body cells, and important information.

Why Table Spacing Matters

Cell spacing can make a table look more open and visually distinct.

For example:

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

This may work well for dashboards, card-style layouts, or visually separated data.

However, traditional data tables often look cleaner with collapsed borders:

table {
  border-collapse: collapse;
}

The best choice depends on the design.

Frequently Asked Questions

What is table padding in HTML?

Table padding is the space between the content inside a table cell and the cell’s border. In modern HTML, it is normally controlled using the CSS padding property.

What is table spacing in HTML?

Table spacing usually refers to the space between table cells. In modern CSS, this is controlled with the border-spacing property when the table uses separated borders.

How do I add padding to an HTML table?

Use CSS:

th, td {
  padding: 10px;
}

How do I add space between table cells?

Use:

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

No. The cellpadding HTML attribute is obsolete. Use CSS padding instead.

No. Use CSS border-spacing instead.

What is the difference between padding and border-spacing?

padding adds space inside each cell, between its content and border. border-spacing adds space between neighboring cells when separated borders are used.

Does border-spacing work with border-collapse: collapse?

No. border-spacing applies to the separated-border model. With border-collapse: collapse, adjacent borders are collapsed instead.

Can I use padding and border spacing together?

Yes. For example:

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

td {
  padding: 12px;
}

This provides both internal cell padding and gaps between cells.

What is a good table padding value?

There is no universal value, but 8px to 16px is often a useful starting range. Adjust it according to the font size, content, layout, and device.

Should table padding be the same for headers and cells?

It can be, but it does not have to be. Slightly larger header padding can help create visual hierarchy.

Can table padding be responsive?

Yes. CSS media queries can change padding based on screen width.

th, td {
  padding: 12px 16px;
}

@media (max-width: 600px) {
  th, td {
    padding: 8px;
  }
}

Final Thoughts

HTML table padding and spacing are important parts of table design. Although older HTML attributes such as cellpadding and cellspacing were once commonly used, modern websites should use CSS for these presentation-related properties.

The two most important concepts are simple:

th, td {
  padding: 10px;
}

adds space inside table cells, while:

table {
  border-spacing: 10px;
}

adds space between cells when the separated-border model is used.

For many modern tables, a combination such as:

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 12px;
  border: 1px solid #ddd;
}

provides a clean and readable starting point.

The goal is not to add as much space as possible. The goal is to create enough space to make the information comfortable, organized, accessible, and easy to scan.

Related Posts

Search
Scroll to Top