WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Set Space Between Two Rows in an HTML Table

Topic: HTML / CSSPrev|Next

Answer: Use border-collapse & border-spacing Properties

You can simply use the CSS border-collapse property in combination with the border-spacing property to create a gap or set space between two rows in an HTML table.

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Add Space Between Two Rows in a Table</title>
<style>
    table{      
        border-collapse: seperate; 
        border-spacing: 0 25px; /* horizontal and vertical values */
        text-align: left;
        width: 500px;
    }
    table tbody tr{
        background: #f2f2f2;
    }
    table tr td{
        padding: 10px;
    }
</style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>[email protected]</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>[email protected]</td>
        </tr>                   
    </tbody>
</table>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties