Skip to content
Related Articles

Related Articles

Space between two rows in a table using CSS?

View Discussion
Improve Article
Save Article
  • Last Updated : 10 May, 2022

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!