Open In App

Space between two rows in a table using CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

The space between two rows in a table can be done using CSS border-spacing and border-collapse property. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of table is collapse or not. The border-spacing attribute can only be used if border-collapse attribute is set to separate.

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        th {
            background-color:green;
            Color:white;
        }
        th, td {
            width:150px;
            text-align:center;
            border:1px solid black;
            padding:5px
         
        }
        .geeks {
            border-right:hidden;
        }
        .gfg {
            border-collapse:separate;
            border-spacing:0 15px;
        }
        h1 {
            color:green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Row spacing in a table</h2>
        <table>
            <tr>
                <th>Employee ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
            </tr>
        </table>
        <table class="gfg">
            <tr>
                <td class="geeks">10001</td>
                <td>Thomas</td>
                <td>M</td>
                <td>32</td>
            </tr>
            <tr>
                <td class="geeks">10002</td>
                <td>Sally</td>
                <td>F</td>
                <td>28</td>
            </tr>
            <tr>
                <td class="geeks">10003</td>
                <td>Anthony</td>
                <td>M</td>
                <td>24</td>
            </tr>
        </table>
    </center>
</body>
 
</html>


Output: row spacing in table

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads