Skip to content
Related Articles

Related Articles

How to add space between elements ?

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Dec, 2021
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!