Table rows and columns in HTML - Browser Rendering Trace

Render Flow - Table rows and columns

Read <table>

→Create TABLE node

↓

Read <tr>

→Create TR node as child of TABLE

↓

Read <td>

→Create TD node as child of TR

↓

Add text content

↓

Close TD

↓

Close TR

↓

Close TABLE

The browser reads the table element, then each row (<tr>) inside it, and then each cell (<td>) inside the rows, building a tree structure that represents the table's rows and columns.

Render Steps - 5 Steps

Code Added:<table> element with no rows or cells

Before

[Empty page]

→

After

[__________]
|          |
|  TABLE   |
|__________|

Adding the table element creates a rectangular box on the page but it is empty because no rows or cells are inside yet.

🔧 Browser Action:Creates TABLE box in layout tree

Code Sample

This code creates a simple 2-row by 2-column table with four cells arranged in rows and columns.

HTML

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Render Quiz - 3 Questions

After step 4, how many columns are visible in the first row?

A Two columns side by side

B One column only

C No columns visible

D Three columns side by side

Common Confusions - 3 Topics

Why do my table cells not line up in columns?

If rows have different numbers of cells, the browser aligns columns based on the first row's cells. Missing cells in other rows can cause misalignment. Always keep the same number of <td> in each <tr>.

💡 Each row should have the same number of cells for columns to line up (see render_step 5).

Why does adding a <div> inside a <table> break the layout?

Tables expect only <tr> elements directly inside. Adding a <div> breaks the table structure and can cause rendering issues. Use only <tr>, <thead>, <tbody>, <tfoot> inside <table>.

💡 Keep table structure semantic: <table> > <tr> > <td> (render_flow).

Why does my table not have visible borders?

By default, tables have no visible borders. You must add CSS like border or border-collapse to see lines between cells.

💡 Add CSS borders to <table>, <tr>, or <td> to see cell outlines.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<table>	table	Defines a table container	Creates a rectangular box that holds rows and columns
<tr>	table-row	Defines a table row	Creates a horizontal row inside the table
<td>	table-cell	Defines a table cell (column)	Creates a cell box inside a row, arranged horizontally
<th>	table-cell (bold by default)	Defines a header cell	Similar to <td> but text is bold and centered by default

Concept Snapshot

Tables are made of rows (<tr>) and columns (cells: <td> or <th>). Each <tr> creates a horizontal row. Each <td> inside a <tr> creates a column cell. Rows stack vertically; cells line up horizontally. Keep same number of cells in each row for alignment. Tables have no borders by default; add CSS to see lines.