Article Categories

Selected Reading

Which table property specifies the width that should appear between table cells in CSS?

CSS Web Development Front End Technology

In HTML, a table contains columns and rows. The table cells don't contain space between two cells by default. If we add some space between table cells, it can improve the UI of the table.

In CSS, the border-spacing property adds space between table cells. We need to use the border-collapse CSS property with the separate value while using the border-spacing CSS property.

Syntax

table {
    border-collapse: separate;
    border-spacing: value;
}

Possible Values

Value	Description
`length`	Specifies spacing in px, em, rem, etc.
`length length`	First value for horizontal, second for vertical spacing
`inherit`	Inherits the value from parent element

Example 1: Basic Border Spacing

The following example creates a table with 2rem spacing between all table cells

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        border-collapse: separate;
        border-spacing: 2rem;
        border: 2px solid green;
    }
    th, td {
        border: 1px solid blue;
        padding: 10px;
        text-align: left;
    }
</style>
</head>
<body>
    <h3>Table with Border Spacing</h3>
    <table>
        <tr>
            <th>Country</th>
            <th>Capital</th>
            <th>Population</th>
        </tr>
        <tr>
            <td>India</td>
            <td>New Delhi</td>
            <td>1.3 billion</td>
        </tr>
        <tr>
            <td>China</td>
            <td>Beijing</td>
            <td>1.4 billion</td>
        </tr>
    </table>
</body>
</html>

A table with clear spacing between all cells appears. Each cell has a blue border with 2rem of space separating them horizontally and vertically.

Example 2: Different Horizontal and Vertical Spacing

You can specify different spacing values for horizontal and vertical directions

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        border-collapse: separate;
        border-spacing: 30px 10px; /* 30px horizontal, 10px vertical */
        border: 2px solid purple;
    }
    th, td {
        border: 1px solid orange;
        padding: 8px;
        text-align: center;
        background-color: #f9f9f9;
    }
</style>
</head>
<body>
    <h3>Custom Horizontal and Vertical Spacing</h3>
    <table>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
        <tr>
            <td>Laptop</td>
            <td>$999</td>
            <td>15</td>
        </tr>
        <tr>
            <td>Phone</td>
            <td>$699</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

A table with wider horizontal spacing (30px) between columns and narrower vertical spacing (10px) between rows. The cells have light gray background with orange borders.

Key Points

The border-collapse property must be set to separate for border-spacing to work
Use a single value for uniform spacing or two values for different horizontal/vertical spacing
Border spacing affects the space between table cells, not within cells (use padding for internal spacing)

Conclusion

The border-spacing property controls the space between table cells when border-collapse is set to separate. It's essential for creating visually appealing tables with proper cell separation.

Shubham Vora

Updated on: 2026-03-15T16:52:56+05:30

562 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next