HTML table spacing controls the distance between table cells. It helps you create tables with clear separation between rows and columns, making information easier to read. You can use table spacing when displaying student records, employee details, product lists, schedules, and other structured data.

In modern HTML, CSS provides the border-spacing property to control the space between table cells. You can also use border-collapse to decide whether cell borders appear separately or combine into a single border.

In this tutorial, you will learn how to set HTML table spacing, control horizontal and vertical gaps, understand the difference between padding and spacing, and style tables using practical examples.

What Is HTML Table Spacing?

HTML table spacing is the gap between adjacent table cells. When table borders are separate, you can use the CSS border-spacing property to control this gap.

For example, the following CSS creates a five-pixel gap between neighboring cells.

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

The border-spacing property applies spacing between cells when the table uses separate borders. It does not add space inside the cells.

HTML Table Spacing Example

The following example demonstrates how to create a table with spacing between its cells.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Spacing</title>

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

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

    th {
      background-color: #0878d1;
      color: white;
    }
  </style>
</head>
<body>

  <h2>Student Details</h2>

  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Course</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>21</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>22</td>
      <td>CSS</td>
    </tr>
  </table>

</body>
</html>

In this example, border-spacing: 10px creates a gap between adjacent cells. The padding property adds space inside each cell, while the borders make the cell boundaries visible.

CSS Border-Spacing Property

The CSS border-spacing property specifies the distance between adjacent table cell borders.

The basic syntax is:

table {
  border-spacing: value;
}

You can use pixel values or other valid CSS length units.

table {
  border-spacing: 8px;
}

This creates an eight-pixel gap between adjacent cells in both the horizontal and vertical directions.

The property works when the table uses separate borders, which is the default border model.

HTML Table Spacing in Horizontal and Vertical Directions

You can set different spacing values for horizontal and vertical gaps by providing two values to border-spacing.

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

  th, td {
    border: 1px solid #333;
    padding: 10px;
  }
</style>

The first value controls the horizontal spacing between columns, and the second value controls the vertical spacing between rows.

CSS Declaration	Horizontal Spacing	Vertical Spacing
border-spacing: 5px;	5px	5px
border-spacing: 10px;	10px	10px
border-spacing: 15px 8px;	15px	8px
border-spacing: 20px 5px;	20px	5px

This approach is useful when you want more space between columns than between rows, or the other way around.

HTML Table Spacing with Border Collapse

The border-collapse property determines whether adjacent cell borders remain separate or combine into a single border.

It accepts two main values:

Value	Description
separate	Keeps cell borders separate and allows spacing between cells
collapse	Combines adjacent cell borders into a single border

Example:

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

  th, td {
    border: 1px solid #333;
    padding: 10px;
  }
</style>

The border-collapse: separate declaration keeps the cell borders independent, allowing the ten-pixel spacing to appear.

If you change the declaration to border-collapse: collapse, the gaps between cell borders will no longer be visible, and border-spacing will have no effect.

HTML Table Spacing with Zero Spacing

Sometimes you may want table cells to sit directly next to each other without gaps. You can set border-spacing to 0.

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

  th, td {
    border: 1px solid #333;
    padding: 10px;
  }
</style>

This removes the spacing between neighboring cells while keeping the separate-border model. Because each cell has its own border, overlapping-looking lines may still appear where the borders meet.

For a continuous grid with shared borders, you can instead use:

table {
  border-collapse: collapse;
}

Both approaches can create compact tables, but the border appearance differs.

HTML Table Spacing with CSS Styling

You can combine table spacing with background colors, borders, and padding to create visually separated cells.

<style>
  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    font-family: Arial, sans-serif;
    background-color: #f1f5f9;
  }

  th, td {
    padding: 12px;
    text-align: left;
    background-color: white;
    border: 1px solid #d1d5db;
  }

  th {
    background-color: #0878d1;
    color: white;
  }
</style>

In this example, the table has an eight-pixel gap between cells, white cell backgrounds, and a blue header. The light background behind the table makes the gaps more noticeable.

HTML Table Spacing vs Table Padding

Table spacing and padding serve different purposes. Understanding the difference helps you control the appearance of your tables correctly.

Feature	Table Spacing	Table Padding
Purpose	Creates gaps between cells	Creates space inside cells
CSS property	border-spacing	padding
Applied to	The table	Individual cells or other elements
Effect	Separates neighboring cells	Moves content away from cell borders
Example	border-spacing: 10px;	td { padding: 10px; }

Use border-spacing to control the distance between cells and padding to control the space around content inside a cell.

Common HTML Table Spacing Mistakes

Avoid these common mistakes when working with table spacing:

• Using border-spacing while border-collapse: collapse is applied.
• Confusing the space between cells with the space inside cells.
• Adding excessive spacing that makes the table unnecessarily wide or tall.
• Forgetting that horizontal and vertical spacing can be controlled separately.
• Expecting border-spacing: 0 to combine adjacent borders into a single border.
• Using outdated HTML presentation attributes instead of CSS properties.

HTML Table Spacing Best Practices

Follow these practices to create well-organized HTML tables:

• Use CSS border-spacing to control gaps between cells.
• Use border-collapse: collapse when you need a continuous grid.
• Choose spacing values that make data easy to scan.
• Use padding to improve readability inside cells.
• Keep tables compact when displaying large amounts of information.
• Test tables on mobile devices to ensure that spacing does not cause unnecessary horizontal overflow.
• Combine spacing, borders, and background colors carefully to maintain a consistent design.

HTML Table Spacing Exercises

Practice the following exercises to improve your understanding of HTML table spacing.

Exercise 1: Create an HTML table with five pixels of spacing between cells.

Exercise 2: Set horizontal spacing to 15 pixels and vertical spacing to 8 pixels.

Exercise 3: Use border-collapse: collapse and observe what happens to the spacing.

Exercise 4: Create a table with zero spacing between cells and visible borders.

Exercise 5: Style a table using border-spacing, padding, and background colors to make the data easy to read.