Table structure in HTML - Browser Rendering Trace

Render Flow - Table structure

Read <table>

→Create TABLE node

↓

Read <thead>

→Create THEAD node as child

↓

Read <tr>

→Create TR node as child

↓

Read <th>

→Create TH node as child with text

↓

Close <tr>

→Close TR node

↓

Close <thead>

→Close THEAD node

↓

Read <tbody>

→Create TBODY node as child

↓

Read <tr>

→Create TR node as child

↓

Read <td>

→Create TD node as child with text

↓

Close <tr>

→Close TR node

↓

Close <tbody>

→Close TBODY node

↓

Close <table>

→Close TABLE node

The browser reads the table element and builds a tree with table sections (thead, tbody), rows (tr), and cells (th, td), creating a structured layout for rendering.

Render Steps - 5 Steps

Code Added:<table> element with no styles

Before

No table visible

→

After

[table]
  [empty space]

The browser creates a table container but no visible content yet.

🔧 Browser Action:Creates TABLE box in layout tree

Code Sample

A simple table with a header row and one body row, styled with borders and padding for clarity.

HTML

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Cell 1</td><td>Cell 2</td></tr>
  </tbody>
</table>

HTML

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  padding: 0.5rem;
  text-align: left;
}

Render Quiz - 3 Questions

After applying step 4, what visual change do you see in the table?

A Cells have extra space inside around text

B Table stretches to fill the container width

C Borders between cells merge into single lines

D Text inside cells is centered

Common Confusions - 3 Topics

Why do my table cells have space between borders?

Without border-collapse: collapse, borders on adjacent cells show double lines because each cell draws its own border separately (see step 4).

💡 Use border-collapse: collapse to merge cell borders into single lines.

Why doesn't padding add space outside the cell border?

Padding adds space inside the cell around the text, not outside the border (see step 5). Margins on table cells usually have no effect.

💡 Use padding inside cells for spacing text; borders define cell edges.

Why is my table not stretching full width?

By default, tables size to content. Setting width: 100% makes the table fill its container horizontally (see code sample CSS).

💡 Add width: 100% on table to make it responsive and full width.

Property Reference

Property	Value Applied	Visual Effect	Common Use
border-collapse	collapse	Borders between cells merge into single lines	Cleaner table borders
border	1px solid black	Adds visible border around cells	Defines cell boundaries
padding	0.5rem	Adds space inside cells around text	Improves readability
text-align	left	Aligns text to the left inside cells	Standard text alignment in tables
width	100%	Table stretches to fill container width	Responsive full-width tables

Concept Snapshot

Tables use <table> as container with <thead> for headers and <tbody> for body rows. Rows are <tr>, headers are <th>, and data cells are <td>. Use border-collapse: collapse to merge cell borders. Add padding inside cells for spacing text. Set width: 100% for full container width. Text aligns left by default in cells.