How to Add Space Between Rows in the Table

Today’s task is to create space between two rows in a table. The space between two rows in a <table> can be added by using the CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table, and the border-collapse property specifies whether the border of the table is collapsed or not. The border-spacing property can be used only when the border-collapse property is set to "separate".

Let’s see an example and show how to do that step by step.

Create HTML

  • Place the <div> tag in the <body> section.
  • Place the <h2> and <h3> tags and write some content in them.
  • Place the <table> tag and create your table.
  • Use the <tr> tag for each row.
  • For the first row, use the <th> tag which defines a header cell in an HTML table.
  • For the other rows, use the <td> tag which defines a standard data cell in an HTML table. For the cells belonging to the first row set a "td" class.
<body>
  <div>
    <h2>W3docs</h2>
    <h3>Row spacing in a table</h3>
    <table>
      <tr>
        <th>Employee ID</th>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td class="td">10001</td>
        <td>Tom</td>
        <td>M</td>
        <td>30</td>
      </tr>
      <tr>
        <td class="td">10002</td>
        <td>Sally</td>
        <td>F</td>
        <td>28</td>
      </tr>
      <tr>
        <td class="td">10003</td>
        <td>Emma</td>
        <td>F</td>
        <td>24</td>
      </tr>
    </table>
  </div>
</body>

Add CSS

  • Use the border-collapse property with its "separate" value for the table.
  • Use the border-spacing property to set the distance between the borders of neighbouring table cells.
  • For the first row, set the background color and the color of the text by using the background-color and color properties.
  • Set the width and padding of the rows.
  • Use the text-align property with the "center" value which aligns the text to the center.
  • You can create a border around the cells of the table by using the border property and use the border-width, border-style and border-color properties.
  • You can set the color of the <h2> element of the document by using the color property. Also, you can choose any color from our color picker.
table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

th {
  background-color: #4287f5;
  color: white;
}

th,
td {
  width: 150px;
  text-align: center;
  border: 1px solid black;
  padding: 5px;
}

h2 {
  color: #4287f5;
}

Here is the result of our code.

Example of adding space between horizontal rows:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: separate;
        border-spacing: 0 15px;
      }
      th {
        background-color: #4287f5;
        color: white;
      }
      th,
      td {
        width: 150px;
        text-align: center;
        border: 1px solid black;
        padding: 5px;
      }
      h2 {
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>W3docs</h2>
      <h3>Row spacing in a table</h3>
      <table>
        <tr>
          <th>Employee ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Age</th>
        </tr>
        <tr>
          <td class="td">10001</td>
          <td>Tom</td>
          <td>M</td>
          <td>30</td>
        </tr>
        <tr>
          <td class="td">10002</td>
          <td>Sally</td>
          <td>F</td>
          <td>28</td>
        </tr>
        <tr>
          <td class="td">10003</td>
          <td>Emma</td>
          <td>F</td>
          <td>24</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Result

Row spacing in a table
Employee ID Name Gender Age
10001 Tom M 30
10002 Sally F 28
10003 Emma F 24

Example of adding space between vertical columns:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: separate;
        border-spacing: 20px 0;
      }
      th {
        background-color: #4287f5;
        color: white;
      }
      th,
      td {
        width: 150px;
        text-align: center;
        border: 1px solid black;
        padding: 5px;
      }
      h2 {
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>W3docs</h2>
      <h3>Row spacing in a table</h3>
      <table>
        <tr>
          <th>Employee ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Age</th>
        </tr>
        <tr>
          <td class="td">10001</td>
          <td>Tom</td>
          <td>M</td>
          <td>30</td>
        </tr>
        <tr>
          <td class="td">10002</td>
          <td>Sally</td>
          <td>F</td>
          <td>28</td>
        </tr>
        <tr>
          <td class="td">10003</td>
          <td>Emma</td>
          <td>F</td>
          <td>24</td>
        </tr>
      </table>
    </div>
  </body>
</html>

In our first example, for the border-spacing property, we use a "0 15px" value which means that space is between the horizontal rows. In the second example, we use a "20px 0 " value which means that space is between the vertical rows.