Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to add space between elements?

  • Last Updated : 17 Jul, 2020

We can use normal CSS to make changes in the table, here 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 trick.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.






<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<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>
<body>
    <table>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
    </table>
</body>
</html>

Output:

Example 2: In the below given example we have used Before selector property. This has helped 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.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<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>
<body>
    <table>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
      <tbody class="tbody">
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
          <tr>
            <td>Geeks for Geeks</td>
            <td>Geeks for Geeks</td>
          </tr>
      </tbody>
    </table>
</body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :