Adding Space Between Table Rows with CSS

When working with tables in HTML and CSS, it’s often necessary to add space between rows to improve readability and visual appeal. This can be achieved using various techniques, including CSS properties such as border-spacing, padding, and margin. In this tutorial, we’ll explore the different methods for adding space between table rows.

Using Border-Spacing

The border-spacing property is used to specify the distance between the borders of adjacent cells in a table. This property only works when the border-collapse property is set to separate. To add space between table rows, you can use the following CSS code:

table {
  border-collapse: separate;
  border-spacing: 0 5px; /* sets horizontal spacing to 0 and vertical spacing to 5px */
}

In this example, we set the border-collapse property to separate, which allows us to use the border-spacing property. We then set the border-spacing property to 0 5px, which means that there will be no horizontal spacing (0) and 5 pixels of vertical spacing between each row.

Using Padding

Another way to add space between table rows is by using the padding property on the td elements. You can use the following CSS code:

tr > td {
  padding-bottom: 1em; /* adds 1em of padding to the bottom of each cell */
}

In this example, we select all td elements that are direct children of a tr element and add 1em of padding to the bottom of each cell. This will create the illusion of space between rows.

Using Margin

You can also use the margin property to add space between table rows. However, this method requires wrapping each row in a container element, such as a div. Here’s an example:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <div style="margin-bottom: 1em;"></div>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

In this example, we add a div element with a margin-bottom of 1em between each row. This will create space between the rows.

Using Empty Rows

If you need to add space between specific rows, you can use empty rows. Here’s an example:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr class="spacer">
    <td></td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

In this example, we add an empty row with a class of spacer between the two rows. We can then style the spacer row to have a specific height and background color.

.tr.spacer {
  height: 1em;
  background-color: transparent;
}

Conclusion

Adding space between table rows can be achieved using various techniques, including CSS properties such as border-spacing, padding, and margin. The method you choose will depend on your specific needs and the structure of your HTML document. By following these examples, you should be able to add space between table rows in a way that works best for your application.