How do you add vertical space between table rows in HTML?

Space Separation in HTML Tables: A Comprehensive Guide

As web developers, we often work with tables to present data in a structured manner. However, situations may arise where you require additional vertical separation between table rows, beyond what browsers typically provide. Can this be achieved using CSS?

CSS for Table Row Spacing

One common misconception is that the CSS property border-spacing can be used to add vertical space between table rows. While it does adjust the spacing between table cells, it does not affect the vertical distance between rows.

Solution: Padding to the Rescue

To create space between table rows, the key lies in applying padding to individual table cells (). Consider the following CSS code:

tr.spaceUnder>td {
  padding-bottom: 1em;
}

The td elements within tr rows bearing the class spaceUnder will receive a bottom padding of 1em, effectively pushing the rows further apart. This allows you to create vertical spacing between selected rows while maintaining a clean and organized table structure.

Additional Considerations

Note that this solution only operates on direct children of tr elements. This enables the creation of nested tables with different spacing between sections, as exemplified in the code below:

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

The above is the detailed content of How do you add vertical space between table rows in HTML?. For more information, please follow other related articles on the PHP Chinese website!