How to Debug Broken HTML Tables

HTML tables are deceptively simple to break. Miss a closing </td>, add an extra cell in one row, or nest a table inside another table without careful alignment, and the whole thing collapses into a jumbled mess. The frustrating part is that browsers don't show you an error — they just render something wrong and leave you guessing.

If you've ever stared at a table that looks fine in your code but renders with mystery gaps, merged cells, or content in the wrong column, this guide will help you find and fix the problem fast.

Why Tables Break

Most broken tables come down to one of four issues:

Mismatched cell counts. Every row in a table needs the same number of cells (unless you're using colspan or rowspan). If row 1 has 4 cells and row 2 has 3, the browser guesses where to put things — and it guesses wrong. This is the single most common table bug.

Unclosed tags. A missing </tr> or </td> causes the browser to interpret the next row's cells as belonging to the current row. The result is cells that seem to merge or disappear entirely.

Nested tables without isolation. Tables inside tables are common in email templates. If the inner table's rows aren't completely self-contained, the browser can merge the inner and outer table structures, producing truly bizarre layouts.

CSS conflicts. A display: block or display: flex on a table element overrides the browser's default table layout algorithm. Even border-collapse vs border-spacing can produce different results than expected.

The Debugging Workflow

Step 1: Paste and preview. Copy your table HTML into the HTML Previewer. See what you're actually dealing with — sometimes the problem is obvious once you see the rendered output next to your code.

Step 2: Prettify. Hit the Prettify button to format the code with proper indentation. With tables, indentation is critical for spotting structural problems. Each <tr> should be at the same indent level. Each <td> inside a <tr> should be indented one level deeper. If the indentation looks uneven after prettifying, you have a structural issue.

Step 3: Count cells per row. Scan through the prettified code and count <td> (or <th>) tags in each row. They should match. The stats bar shows your total element count — if you have 5 rows and 4 columns, you should see roughly 20 <td> elements plus 5 <tr> elements plus the <table> and optional <thead>/<tbody> wrappers.

Step 4: Isolate the broken row. If the table is long, delete rows from the bottom until the remaining rows render correctly. The first row you remove that fixes the layout is the broken one. Add it back and inspect it closely.

Step 5: Test responsive. Tables are notorious for breaking on mobile. Toggle to the mobile preview (375px) and check for horizontal scrolling. If the table overflows, wrap it in <div style="overflow-x:auto"> to make it scrollable rather than letting it blow out the page width.

Common Fixes

Missing cell: Add an empty <td></td> to the row that has fewer cells. Or use colspan if the short row is intentional: <td colspan="2">Merged cell</td>.

Unclosed tag: After prettifying, look for indentation that suddenly shifts. An unclosed <td> will cause the next cell's content to appear nested inside the previous cell. Add the missing close tag.

Border gaps: Add style="border-collapse:collapse" to the <table> tag. This eliminates the default spacing between cell borders that causes visible gaps.

Width inconsistency: Set explicit widths on the first row's cells using style="width:25%" (for a 4-column table). All subsequent rows will follow the first row's column widths.

Mobile overflow: Add style="width:100%;table-layout:fixed" to the <table> tag and wrap long cell content with word-break:break-word.

Email Table Debugging

Email templates use tables for layout (not just data display) because email clients don't support modern CSS layout. This means you might have 3-4 levels of nested tables just to create a two-column layout with a header and footer.

When debugging email tables specifically, remember that Outlook uses Microsoft Word's rendering engine, which handles tables differently than any browser. If your table looks fine in the HTML Previewer but breaks in Outlook, the issue is almost always one of these: padding on <td> elements (Outlook ignores it on some elements — use nested tables with spacer cells instead), max-width (Outlook ignores it — use fixed width), or percentage widths on nested tables (Outlook calculates these relative to the viewport, not the parent table).

Prevention

The fastest way to avoid table bugs is to check your work as you build. Keep the HTML Previewer open in another tab, paste your table after each row you add, and catch problems when they're one row away from the last working state — not buried 30 rows deep.