How to add Space between two rows in a table using CSS

To add space between two rows in a table using CSS, you can apply a margin or padding to the <tr> elements. Here’s how you can do it:

HTML:

<table class="spaced-table">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
  <!-- Add more rows as needed -->
</table>

CSS:

.spaced-table tr {
  margin-bottom: 10px; /* Adjust the margin value as needed */
}

In this example, we give the table a class name of “spaced-table.” We then apply a margin-bottom to the <tr> elements inside the table with the class name “spaced-table.” This adds space between each row by creating a margin at the bottom of each row.

You can adjust the margin-bottom value to control the amount of space between the rows. If you prefer using padding instead, you can use padding-bottom instead of margin-bottom in the CSS.

Keep in mind that applying margins or padding to table rows may affect the overall layout of the table, so it’s essential to test and adjust the values to ensure the desired appearance and alignment of your table.