Space Between Two Rows In a Table Using Css

Posted By Bajarangi soft , Posted On 08-10-2020

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.

1.Create a Table Using Css


<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        th {
            background-color: #00807c;
            Color:white;
        }
        th, td {
            width:150px;
            text-align:center;
            border:1px solid black;
            padding:5px

        }
        .baja {
            border-right:hidden;
        }
        .gfg {
            border-collapse:separate;
            border-spacing:0 15px;
        }
        h1 {
            color: #008062;
        }
    </style>
</head>
<body>
<center>
    <h1>Bajarangi Soft</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 = "baja">120001</td>
            <td>sirisha</td>
            <td>M</td>
            <td>32</td>
        </tr>
        <tr>
            <td class = "baja">120002</td>
            <td>Sindhu</td>
            <td>F</td>
            <td>28</td>
        </tr>
        <tr>
            <td class = "baja">120003</td>
            <td>swapna</td>
            <td>M</td>
            <td>24</td>
        </tr>
    </table>
</center>
</body>
</html>