Very little spacing between the TR tag – HTML & CSS

HTML tables are designed for tabular data, but their layout rules do not behave like ordinary block elements. One common frustration is trying to add vertical space between rows with margin on a <tr> element, only to find that nothing changes. That happens because table rows participate in the table formatting model, where spacing is controlled by table-specific properties rather than normal box margins.

To create visible separation between rows, the most reliable methods are to use border-spacing with border-collapse: separate, add padding inside <td> and <th> cells, or use borders and background colors to create the appearance of spacing. If the content is not truly tabular, CSS Grid or Flexbox may provide cleaner control over gaps and alignment.

#	Preview	Product	Price
1		HTML CSS Cheat Sheet, Cover all Basic Html Css Syntaxes, Quick Reference Guide by Examples, ISBN:...	$19.99	Buy on Amazon
2		HTML and CSS: Design and Build Websites	$14.94	Buy on Amazon
3		Modern Web Design Using HTML and CSS: A Comprehensive Reference for Creating Responsive Websites,...	$34.00	Buy on Amazon
4		HTML & CSS: The Comprehensive Guide to Excelling in HTML5 and CSS3 for Responsive Web Design,...	$51.36	Buy on Amazon
5		CSS Pocket Reference: Visual Presentation for the Web	$19.93	Buy on Amazon

As an Amazon Associate I earn from qualifying purchases.

Why Margin Does Not Work on `

` Elements

In normal CSS layout, adding margin-top or margin-bottom to an element creates space outside that element’s box. Table rows are different. A <tr> participates in the browser’s table formatting model, where rows, row groups, columns, and cells are laid out according to table-specific rules rather than the standard block box model. Because of that, vertical margins on <tr> elements are not applied the way they would be on a <div>, <p>, or other block-level element.

A table row is not a standalone visual box with external space above and below it. Its height is determined mainly by the cells it contains: the content inside each <td> or <th>, the cell padding, borders, line height, and the table’s border model. When you write CSS such as tr { margin-bottom: 12px; }, many browsers will simply ignore that margin for layout purposes. The declaration may appear in developer tools, but it will not create a visible gap between rows.

#1 Best Overall

HTML CSS Cheat Sheet, Cover all Basic Html Css Syntaxes, Quick Reference Guide by Examples, ISBN: 9798877126046: Html Css Programming Syntax Book, Syntax Table & Chart, Quick Study Workbook

$19.99

Buy on Amazon

This behavior is especially noticeable when comparing table rows to block elements. For example, two stacked <div> elements can be separated with margin-bottom because each <div> generates a block box in normal flow. A <tr>, however, generates a table-row box inside a table formatting context. The spacing between rows is controlled by table-related properties and cell styling, not by row margins.

Common ineffective pattern

The following kind of rule is a frequent source of confusion:

tr {
margin-bottom: 10px;
}

It looks reasonable, but it will not reliably add vertical space between rows. The better approach is to choose a table-compatible technique based on the visual effect you want. If you want an actual gap between rows, use border-spacing on the table with border-collapse: separate. If you want more breathing room inside each row, increase padding on the cells. If you want rows to feel separated without physical gaps, use borders or contrasting backgrounds on the cells.

• Use border-spacing when you need visible space between adjacent table cells or rows.
• Use cell padding when the rows feel cramped because the content is too close to cell edges.
• Use borders or backgrounds when you want separation while keeping a continuous table structure.
• Use Grid or Flexbox when the content is not truly tabular and row semantics are unnecessary.

Keeping this distinction clear helps avoid brittle CSS. Rather than fighting the browser’s table layout algorithm with margins on <tr>, style the table through the properties that are designed to affect table spacing and cell presentation.

Using `border-spacing` with `border-collapse: separate`

The standards-friendly way to create visible gaps between table rows is to use border-spacing on the <table> element. This property controls the space between adjacent table cells, which effectively creates vertical space between rows when the table is using the separated borders model. For it to work, the table must use border-collapse: separate, because collapsed borders merge neighboring cell borders and remove the spacing area between them.

A typical pattern is to set horizontal spacing to 0 and vertical spacing to the desired row gap. The first value controls the space between columns, and the second value controls the space between rows:

table {
border-collapse: separate;
border-spacing: 0 12px;
}

With this CSS, each row appears separated by 12px of vertical space while the columns remain aligned with no horizontal gaps. This is often the closest replacement for trying to apply margin-bottom to a <tr>. The spacing is not attached to the row itself; it is part of the table layout model, so it is calculated consistently by the browser.

Example with row-like cards

<table class="orders">
<thead>
<tr>
<th>Order</th>
<th>Customer</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1042</td>
<td>Maya Chen</td>
<td>Paid</td>
</tr>
<tr>
<td>#1043</td>
<td>Jon Bell</td>
<td>Pending</td>
</tr>
</tbody>
</table>

Rank #2

Sale

HTML and CSS: Design and Build Websites

• HTML CSS Design and Build Web Sites
• Comes with secure packaging
• It can be a gift option

$14.94

Buy on Amazon

.orders {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.orders th,
.orders td {
  padding: 14px 16px;
  background: #fff;
}

.orders tbody tr {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

This approach works well for tables styled as separated rows or “cards.” The cells can have a shared background color, padding, and shadows, while border-spacing supplies the vertical gap. If you want rounded corners on each visual row, apply the radius to the first and last cells rather than the <tr>:

.orders td:first-child,
.orders th:first-child {
border-radius: 8px 0 0 8px;
}

.orders td:last-child,
.orders th:last-child {
border-radius: 0 8px 8px 0;
}

One detail to watch is that border-spacing also affects the space around the outside edges of the table in the separated borders model. If that extra top or bottom space is visually unwanted, place the table inside a wrapper and control the wrapper spacing, or adjust surrounding margins so the table aligns with nearby content. For many data tables, border-spacing: 0 8px or 0 12px gives enough row separation without breaking column alignment or table semantics.

Adding Space with Cell Padding on `

` and `

`

When the goal is to make table rows feel less cramped, adding padding to the cells is often the simplest and most reliable approach. A table row itself does not create a normal box that accepts vertical margin in the way a block element does, but each <td> and <th> contains visible content and can be padded. Increasing the top and bottom padding inside cells makes every row taller and gives text, icons, buttons, and form controls more breathing room.

A common pattern is to set vertical padding on all header and data cells, then use horizontal padding for alignment and readability. This works with both collapsed and separate border models, so it is usually safer than relying only on gaps between rows. For example, a compact table might use padding: 0.4rem 0.75rem;, while a more spacious data table might use padding: 0.85rem 1rem; or more.

table {
width: 100%;
}

th,
td {
padding: 0.75rem 1rem;
text-align: left;
vertical-align: middle;
}

Padding changes the space inside each cell rather than inserting an external gap between adjacent rows. That distinction matters visually. If the table has a continuous background color, larger padding simply makes each row taller. If each row or cell has its own background, the padded area is included in that colored region. This is useful for dashboards, admin lists, pricing tables, and reports where rows need to look substantial without separating into floating cards.

Applying different padding to header and body cells

Header cells often need slightly different spacing from body cells. For instance, column labels may be smaller, uppercase, or visually lighter than the main data. You can style <th> separately while keeping the row rhythm consistent across the table body.

Rank #3

Modern Web Design Using HTML and CSS: A Comprehensive Reference for Creating Responsive Websites, Interactive Interfaces, and Accessible Digital ... Today, Professional Tomorrow in Tech)

$34.00

Buy on Amazon

thead th {
padding: 0.6rem 1rem;
font-size: 0.875rem;
font-weight: 600;
}

tbody td {
padding: 0.85rem 1rem;
}

For tables with interactive controls, make sure the padding supports the largest element in the row. A row containing a button, status badge, avatar, or input field may need more vertical padding than a text-only row. If some rows look uneven, inspect the cell content first; line height, button padding, image height, and form control styling can all affect the final row height.

• Use vertical padding such as padding-top and padding-bottom to increase row height.
• Use horizontal padding to keep cell content away from column edges.
• Set a readable line height, for example line-height: 1.4;, so multi-line cells do not feel compressed.
• Keep padding consistent across related cells to preserve clean column alignment.

Cell padding is best when you want more comfortable rows while preserving true table behavior: aligned columns, accessible table semantics, and predictable sizing. If you need visible gaps between rows, combine padding with border-spacing, borders, or row backgrounds. If you only need better readability within a standard data table, padding on <td> and <th> is usually the first adjustment to make.

Creating Row Separation with Borders or Background Colors

When you want visible separation between table rows without changing the actual distance between them, borders and background colors are often the cleanest options. Instead of trying to push <tr> elements apart with margins, you can style the cells inside each row so the table remains structurally valid and predictable across browsers. This works especially well for data tables where the rows should still align perfectly in columns.

A common approach is to add a bottom border to each <td> or <th>. Since table rows are made up of cells, applying the border to the cells gives the appearance of a separator line across the full row. For example, you might use td, th { border-bottom: 1px solid #ddd; }. To avoid an extra line after the final row, target the last row with tbody tr:last-child td { border-bottom: none; }. This creates a clear row division while keeping the table compact.

For a softer visual effect, background colors can separate rows without adding hard lines. Zebra striping is a popular pattern: tbody tr:nth-child(even) { background: #f7f7f7; }. This does not add physical spacing, but it improves readability by making each row easier to scan. If you need the background to appear inside a row with rounded corners or gaps, apply the background to the cells rather than relying only on the <tr>, since cell rendering is more consistent.

Practical row separator patterns

• Thin dividers: Use border-bottom on td and th for simple horizontal lines.
• Zebra rows: Use :nth-child() to alternate row background colors for easier scanning.
• Card-like rows: Use border-spacing together with cell backgrounds to create separated row blocks.
• Grouped data: Use a thicker top border on the first row of each group to show section breaks.

If you are using border-collapse: collapse;, borders from adjacent cells are merged into a single border. That can be useful for traditional grid tables, but it also means you will not get real gaps between rows. In collapsed-border mode, focus on separator lines, row shading, and padding inside cells. If you need actual visible space between rows, switch to border-collapse: separate; and use border-spacing, then combine it with background colors on the cells to make each row look distinct.

For tables with colored row backgrounds, be careful about where the color is applied. A background on tr may work in many modern browsers, but applying backgrounds to td and th gives you finer control, especially when borders, spacing, or rounded corners are involved. For example, the first and last cells in a row can receive border-radius values to create a pill-shaped row while the middle cells keep a continuous background. This technique gives the visual effect of separated rows while preserving proper table semantics for tabular data.

Handling Common Issues with `border-collapse`

The border-collapse property has a major effect on how table spacing behaves. When a table uses border-collapse: collapse;, adjacent cell borders are merged into a single border, and the browser ignores border-spacing. This is a common source of confusion when vertical row gaps seem to disappear even though border-spacing: 0 12px; has been applied correctly.

Rank #4

Sale

HTML & CSS: The Comprehensive Guide to Excelling in HTML5 and CSS3 for Responsive Web Design, Dynamic Content, and Modern Layouts (Rheinwerk Computing)

$51.36

Buy on Amazon

If you want visible space between rows, use border-collapse: separate; on the table. In that mode, border-spacing works as expected, including separate horizontal and vertical values. For example, border-spacing: 0 10px; keeps columns aligned while adding 10 pixels of vertical space between rows. This is usually the cleanest CSS-only method when the design calls for card-like rows or separated table entries.

Collapsed borders versus separated rows

Collapsed borders are best suited to traditional data grids where cells share clean single-pixel lines. Separated borders are better when each row needs visual breathing room. Mixing expectations between the two modes often causes layout issues: collapsed tables remove the gaps, while separated tables may create outer spacing around the first and last rows unless you account for it with surrounding layout styles.

• Use border-collapse: collapse; when you want a compact spreadsheet-style table with shared borders.
• Use border-collapse: separate; when you want border-spacing to create gaps between cells or rows.
• Use cell padding when you need more internal space without creating actual gaps between rows.
• Use borders or background colors when you want separation while keeping the table compact.

Another common issue appears when table row backgrounds do not fill the spacing area. With border-spacing, the gap between rows belongs to the table background, not the tr background. If each row has a colored background, the space between rows may show the table or parent background instead. This can be useful for creating separation, but if it looks accidental, set an appropriate background color on the table or its container.

Rounded corners can also behave differently depending on the collapse mode. With border-collapse: collapse;, applying border-radius directly to rows or cells often produces inconsistent results because borders are merged. For card-like rows with rounded edges, a more reliable approach is to use border-collapse: separate;, apply backgrounds to the cells, and round the first and last cells in each row.

For precise control, decide first whether the table should look like a continuous grid or a set of separated records. A continuous grid should usually rely on collapsed borders, padding, and subtle background changes. A separated-row design should usually rely on border-collapse: separate;, vertical border-spacing, and carefully applied cell backgrounds.

When to Use CSS Grid or Flexbox Instead of Tables

If the content is not genuinely tabular, CSS Grid or Flexbox is often a better choice than a table. A table should be used when the relationship between rows and columns matters: prices by plan, orders by date, statistics by category, comparison matrices, schedules, or reports where headers describe cell values. In those cases, table markup gives browsers and assistive technologies meaningful structure. If the layout is simply a set of cards, form controls, navigation items, profile rows, or repeated content blocks that only look table-like, layout CSS gives you more spacing control with less friction.

CSS Grid is especially useful when you need two-dimensional alignment: columns and rows that line up, consistent gutters, and responsive rearrangement. Instead of fighting table row margins, you can define vertical spacing with row-gap and horizontal spacing with column-gap. This makes it straightforward to create visual separation between repeated items while keeping the markup simple. For example, a product list with an image, title, price, and action button can be laid out as a grid without pretending it is a data table.

• Use a table when users need to compare values across columns and rows.
• Use CSS Grid when items need column alignment but the content is not formal data.
• Use Flexbox when items flow in one direction, such as a toolbar, menu, badge list, or compact row layout.
• Use semantic elements such as <section>, <article>, <dl>, or lists when they better describe the content.

Flexbox is usually the simpler option for one-dimensional layouts. If each item is a horizontal strip with a label on the left and controls on the right, a flex container can align those pieces while gap creates clean spacing between them. Unlike margins on table rows, gap is designed for layout spacing and behaves predictably across wrapped and responsive layouts. It also avoids table-specific interactions such as border-collapse, anonymous table boxes, and inconsistent row spacing expectations.

A common pattern is to replace a presentational table with a list. Each list item can become a grid or flex container, and the parent list can use display: grid with gap for vertical rhythm. This is useful for search results, settings panels, invoice summaries, feature lists, and admin dashboards where the design resembles rows but the information is not best understood as a table. For narrow screens, grid or flex layouts can stack fields naturally, while a real table may require horizontal scrolling or careful responsive handling.

Best Value

Sale

CSS Pocket Reference: Visual Presentation for the Web

$19.93

Buy on Amazon

The main decision is semantic rather than visual. If removing the columns would make the data harder to understand, keep the table and use table-friendly spacing methods such as border-spacing, cell padding, and borders. If the table exists only to position elements on the page, switch to CSS Grid or Flexbox. You will gain direct control over spacing, alignment, wrapping, and responsiveness while keeping the HTML closer to the meaning of the content.

Frequently Asked Questions

Why does margin on a table row not create space between rows?

A <tr> participates in the CSS table layout model, so margins are not applied to it the same way they are on normal block elements. Browsers generally ignore margin on table rows, which is tr { margin-bottom: 10px; } does not produce visible spacing. Use border-spacing, cell padding, or borders instead.

What is the best CSS way to add vertical space between table rows?

The most direct standards-friendly method is to use border-spacing on the <table> with border-collapse: separate;. For example, table { border-collapse: separate; border-spacing: 0 10px; } adds 10px of vertical space between rows while keeping horizontal spacing at 0. This works well when you want actual gaps between row boxes.

Why is border-spacing not working on my table?

border-spacing only works when the table uses border-collapse: separate;. If your CSS has border-collapse: collapse;, the browser collapses adjacent borders and ignores the spacing between cells. Check for global table styles from resets, frameworks, or component libraries that may be setting collapsed borders.

Can I add spacing between rows without creating visible gaps in the table background?

Yes, use padding inside the table cells instead of spacing between rows. Apply styles such as td, th { padding-top: 12px; padding-bottom: 12px; } to make each row taller while keeping the table visually continuous. This is often better for data tables where the background or borders should remain connected.

Should I use a table if I only want rows with spacing for layout?

Use a table when the content is genuinely tabular, such as data with rows and columns that benefit from headers and cell relationships. If you are only arranging cards, form sections, or page layout blocks, CSS Grid or Flexbox is usually easier and more flexible. Those layout systems support margins, gaps, alignment, wrapping, and responsive behavior more naturally than table elements.

Bottom Line

Spacing between table rows is limited because <tr> elements participate in the table formatting model, so margins on rows are not applied the way they are on normal block elements. For real tables, use standards-friendly tools like border-spacing with border-collapse: separate, padding on <td>/<th>, or borders to create clear visual separation.

If you only need a row-like layout and not true tabular data, consider CSS Grid, Flexbox, or block-based markup instead. Choose the approach based on semantics first, then apply the spacing technique that fits the structure cleanly.

Quick Recap

Bestseller No. 1

HTML CSS Cheat Sheet, Cover all Basic Html Css Syntaxes, Quick Reference Guide by Examples, ISBN: 9798877126046: Html Css Programming Syntax Book, Syntax Table & Chart, Quick Study Workbook

$19.99

SaleBestseller No. 2

HTML and CSS: Design and Build Websites

HTML CSS Design and Build Web Sites; Comes with secure packaging; It can be a gift option

$14.94

Bestseller No. 3

Modern Web Design Using HTML and CSS: A Comprehensive Reference for Creating Responsive Websites, Interactive Interfaces, and Accessible Digital ... Today, Professional Tomorrow in Tech)

$34.00

SaleBestseller No. 4

HTML & CSS: The Comprehensive Guide to Excelling in HTML5 and CSS3 for Responsive Web Design, Dynamic Content, and Modern Layouts (Rheinwerk Computing)

$51.36

SaleBestseller No. 5

CSS Pocket Reference: Visual Presentation for the Web

$19.93

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.