Cell merging in HTML - Browser Rendering Trace

Render Flow - Cell merging

Read <table>

→Create TABLE node

↓

Read <tr>

→Create TR node as child

↓

Read <td>

→Create TD node as child

↓

Check colspan/rowspan

↓

Set cell span

↓

Close TD

↓

Close TR

↓

Close TABLE

↓

Calculate layout with merged cells

↓

Paint merged cells

↓

Composite final table

The browser reads the table structure, creates table rows and cells, then applies colspan and rowspan to merge cells visually before painting the table.

Render Steps - 3 Steps

Code Added:<table> element with two rows and three cells each

Before

No table visible

→

After

[TABLE]
  [TR]
    [TD] Cell 1 [TD] Cell 2 [TD] Cell 3
  [TR]
    [TD] Cell 4 [TD] Cell 5 [TD] Cell 6

The browser creates a table with two rows and three cells in each row, all cells separate and equal sized.

🔧 Browser Action:Creates DOM nodes for table, rows, and cells; calculates default cell layout

Code Sample

A table with the first row's first cell spanning two columns, merging two cells horizontally.

HTML

<table>
  <tr>
    <td colspan="2">Merged Cell</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

HTML

table {
  border-collapse: collapse;
  width: 50%;
}
td {
  border: 1px solid black;
  padding: 0.5rem;
  text-align: center;
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see in the first row?

A The first cell spans two rows, merging vertically

B The first cell spans two columns, merging horizontally

C All cells become the same size

D The table loses its borders

Common Confusions - 2 Topics

Why does colspan="2" make the cell wider but not taller?

Colspan merges cells horizontally across columns, so the cell stretches sideways but keeps the same row height. To merge vertically, use rowspan.

💡 colspan = horizontal merge; rowspan = vertical merge (see render_step 2)

Why do borders between merged cells sometimes look thicker or doubled?

Without border-collapse: collapse, borders from adjacent cells stack, making them look thicker. Using border-collapse: collapse merges borders into one line.

💡 Use border-collapse: collapse for clean merged cell borders (see render_step 3)

Property Reference

Property	Value Applied	Effect on Cell	Visual Result	Common Use
colspan	number (e.g., 2)	Merges cells horizontally	Cell spans multiple columns	Combine adjacent columns
rowspan	number (e.g., 2)	Merges cells vertically	Cell spans multiple rows	Combine adjacent rows
border-collapse	collapse	Borders between cells merge	Single border line between cells	Cleaner table borders
border-collapse	separate	Borders separate per cell	Double borders between cells	Default border style

Concept Snapshot

Cell merging uses colspan and rowspan attributes. colspan merges cells horizontally across columns. rowspan merges cells vertically across rows. border-collapse: collapse merges borders for cleaner look. Merged cells take space of multiple cells visually.