Space Between Rows in a Table Using CSS: Easy Guide

Post Date: November 15, 2019
Last Updated: November 8, 2026

Introduction

Adding space between rows in an HTML table helps improve readability and makes tabular data easier to understand. CSS provides the border-collapse and border-spacing properties to control the spacing between table cells.

In this article, we will learn how to add space between rows in a table using CSS with a simple HTML example.

CSS Properties Used to Add Space Between Table Rows

Two important CSS properties are used to control the spacing between table cells.

1. border-collapse

The border-collapse property specifies whether table cell borders should be combined into a single border or kept separate.

It supports two commonly used values:

collapse: Adjacent cell borders are combined into a single border.
separate: Each cell maintains its own border, allowing spacing between cells.

Syntax:

table {
    border-collapse: separate;
}

2. border-spacing

The border-spacing property specifies the distance between the borders of adjacent table cells.

It accepts one or two values:

One value: Sets both horizontal and vertical spacing.
Two values: The first value sets horizontal spacing, and the second sets vertical spacing.

Syntax:

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

Here:

25px represents the horizontal spacing between cells.
15px represents the vertical spacing between cells.

Note: The border-spacing property works when border-collapse is set to separate. It does not work with border-collapse: collapse.

Example: How to Add Space Between Rows in a Table Using CSS

Let’s create an HTML table containing student details and apply CSS properties to add space between the rows and columns.

HTML and CSS Code

<!DOCTYPE html>
<html>
<head>
    <title>Space Between Table Rows</title>

    <style>
        table {
            width: 60%;
            border: 1px solid black;
            border-collapse: separate;
            border-spacing: 25px 15px;
        }

        th, td {
            width: 150px;
            text-align: center;
            border: 1px solid black;
            padding: 10px;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>

    <center>
        <h2>Student Details</h2>

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

            <tr>
                <td>301</td>
                <td>AAA</td>
                <td>20</td>
            </tr>

            <tr>
                <td>302</td>
                <td>BBB</td>
                <td>24</td>
            </tr>

            <tr>
                <td>303</td>
                <td>CCC</td>
                <td>21</td>
            </tr>
        </table>
    </center>

</body>
</html>

Explanation

Let’s understand the important CSS properties used in this example:

1. border-collapse: separate;

This keeps the borders of individual table cells separate instead of combining them.

2. border-spacing: 25px 15px;

This creates 25 pixels of horizontal spacing and 15 pixels of vertical spacing between adjacent table cells.

3. padding: 10px;

This adds space inside each table cell, between the content and its border.

4. text-align: center;

This aligns the text in the center of each table cell.

Output

How to Add Only Vertical Space Between Table Rows

If you want to add space only between table rows without horizontal spacing, use a single zero horizontal spacing value and specify the vertical spacing.

table {
    border-collapse: separate;
    border-spacing: 0 15px;
}

Here, 0 removes horizontal spacing, while 15px adds vertical spacing between cells in adjacent rows.

Difference Between border-spacing and padding

Both properties add space to a table, but they work differently.

CSS Property	Purpose
`border-spacing`	Adds space between adjacent table cells
`padding`	Adds space inside a table cell
`border-collapse`	Controls whether adjacent cell borders are combined or separated

Use border-spacing when you need gaps between table cells. Use padding when you need more space around the content inside each cell.

Conclusion

Adding space between rows in a table using CSS is simple with the border-collapse and border-spacing properties.

Set border-collapse: separate to keep cell borders independent, and use border-spacing to control the horizontal and vertical gaps between cells.

These properties help improve table readability and create cleaner HTML table layouts.

Frequently Asked Questions (FAQs)

1. How can I add space between rows in an HTML table using CSS?

Set border-collapse: separate and use the border-spacing property to control the distance between adjacent table cells.

table {
    border-collapse: separate;
    border-spacing: 0 15px;
}

2. What is the purpose of the border-spacing property in CSS?

The border-spacing property controls the horizontal and vertical distance between adjacent table cells.

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

No. The border-spacing property only works when border-collapse is set to separate.

4. What is the difference between border-spacing and padding?

border-spacing creates gaps between table cells, whereas padding creates space inside individual cells between the content and the cell border.

5. Can I add only vertical spacing between table rows?

Yes. Use border-spacing: 0 15px along with border-collapse: separate to remove horizontal spacing and add vertical spacing.

Dynamic Dependent drop down list using html,php,mysql

Official Documentation

Talk to Our Experts

Looking for reliable web development and frontend development solutions?

Pheonix Solutions provides web development, application development, cloud solutions, and DevOps services to help businesses build efficient and scalable digital solutions.

Our experts can help you develop responsive websites, improve user experiences, and implement modern frontend technologies.

Contact our experts to discuss your project requirements.

Thank you for choosing Pheonix Solutions!

Post Views: 283