Introduction

In HTML tables, adding vertical space between rows is not as simple as adding margin to a tr. Table layout has its own rules, so some CSS properties behave differently from normal block elements.

The right technique depends on what kind of spacing you want. Sometimes you want actual gaps between rows, and sometimes you just want the cells to feel taller and less cramped.

Why margin on tr Usually Fails

A common first attempt is something like this:

tr {
  margin-bottom: 12px;
}

That usually does not create visible space between table rows, because table rows do not participate in layout the same way ordinary block elements do.

If your goal is visual spacing, use one of these instead:

• increase cell padding
• use border-spacing on the table
• add borders or background tricks for row separation

Option 1: Increase Cell Padding

If you want rows to feel taller, padding on the cells is the simplest and most robust option:

1<table class="orders">
2  <tr>
3    <td>Order 1001</td>
4    <td>Pending</td>
5  </tr>
6  <tr>
7    <td>Order 1002</td>
8    <td>Shipped</td>
9  </tr>
10</table>

1.orders td {
2  padding: 12px 16px;
3  border-bottom: 1px solid #ddd;
4}

This does not create an actual empty gap between rows, but it often solves the design problem because the content has more breathing room.

Option 2: Use border-spacing for Real Gaps

If you want real space between rows, use border-spacing on the table and make sure the table is using the separate border model:

1<table class="spaced-table">
2  <tr>
3    <td>Alpha</td>
4    <td>10</td>
5  </tr>
6  <tr>
7    <td>Beta</td>
8    <td>20</td>
9  </tr>
10</table>

1.spaced-table {
2  border-collapse: separate;
3  border-spacing: 0 10px;
4}
5
6.spaced-table td {
7  background: white;
8  padding: 10px 14px;
9}

The 0 10px means no horizontal gap and 10px of vertical gap between rows.

This is the closest CSS answer to "put space between rows." It is also the solution people often miss because border-spacing does nothing when border-collapse: collapse is still active.

Option 3: Add Extra Space Below Specific Rows

Sometimes you do not want every row spaced equally. You only want one row to have extra separation. In that case, use padding on that row's cells through a class:

1<table class="report">
2  <tr class="space-under">
3    <td>Section A</td>
4    <td>Ready</td>
5  </tr>
6  <tr>
7    <td>Section B</td>
8    <td>Pending</td>
9  </tr>
10</table>

1.report {
2  border-collapse: collapse;
3}
4
5.report td {
6  padding: 8px 12px;
7}
8
9.space-under td {
10  padding-bottom: 24px;
11}

This does not create a separate gap object, but it produces visible extra space after one row without changing the whole table layout.

Choosing the Right Approach

Use cell padding when the table simply looks cramped. Use border-spacing when you truly want visible row gaps. Use row-specific cell classes when only some rows need separation.

There is no single universal best answer because tables are often constrained by border styles, background colors, zebra striping, and browser defaults.

If the design includes row backgrounds or card-like rows, border-spacing plus border-collapse: separate is often the strongest option. If the table has classic grid borders, padding may be easier to control.

Common Pitfalls

The biggest pitfall is trying to use margin on tr or td and expecting block-layout behavior. Tables do not work that way.

Another common issue is setting border-spacing while still using border-collapse: collapse. In that mode, the spacing setting has no visible effect.

People also forget that extra padding changes row height, not true row separation. That can be perfectly fine, but it is not the same thing as an actual gap.

Finally, if you use background colors, check how the gap should look. With border-spacing, the table background may show through between rows, so set backgrounds intentionally on the table and cells.

Summary

• 'margin on tr usually does not create space between table rows.'
• Use cell padding when you want rows to feel taller.
• Use border-spacing with border-collapse: separate when you want real gaps between rows.
• For extra space after one row, target that row's cells with a class and more bottom padding.
• Pick the technique based on whether you need true gaps or just more comfortable row height.