Open In App

How to add space between elements ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will know how to add space between elements in the HTML table, along with understanding its implementation through the examples. We can use normal CSS to make changes in the table, where we will be using border property to give spacing between different tbody elements.

No prior and deep knowledge is required it is just basic CSS and HTML tricks.

Note: Only thing to be noted is that there must be one “tr” tag inside the tbody tag.

Example 1: The code that uses the border-top property to give the spacing between the elements is given below.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Document</title>
    <style>
    body {
        color: #fff;
        font-size: 12px;
    }
     
    table {
        border-collapse: collapse;
    }
     
    table td {
        padding: 5px;
        background-color: #093d24;
    }
     
    .tbody {
        border-top: 25px solid #0f9d58;
    }
    </style>
</head>
 
<body>
    <table>
        <tbody class="tbody">
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
        </tbody>
        <tbody class="tbody">
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
        </tbody>
        <tbody class="tbody">
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>


Output:

Adding the space between the elements in the table

Example 2: In the below given example, we have used the ::before selector property, which will help in giving a margin between the tbody elements, so the code for this is given below. Also, we have used overflow: hidden property in the table to prevent overflow of before element.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
        color: #fff;
        font-size: 12px;
        background-color: #f2f2f2;
    }
     
    table {
        overflow: hidden;
        border-collapse: collapse;
        position: relative;
    }
     
    table td {
        padding: 5px;
        border: 1px solid #000;
        background-color: #093d24;
    }
     
    .tbody::before {
        content: "";
        margin: 10px;
    }
    </style>
    <title>Document</title>
</head>
 
<body>
    <table>
        <tbody class="tbody">
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
        </tbody>
        <tbody class="tbody">
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
        </tbody>
        <tbody class="tbody">
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
            <tr>
                <td>GeeksforGeeks</td>
                <td>GeeksforGeeks</td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>


Output:

Preventing the overflow of before element using Overflow Property



Last Updated : 13 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads