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.

Practice

1. Which HTML tag is used to create a row inside a table?

easy

A. <tr>

B. <td>

C. <th>

D. <table>

Solution

1. Step 1: Understand table row structure

   The <tr> tag defines a row in an HTML table.

2. Step 2: Differentiate row from cells

   <td> and <th> define cells, not rows.

3. Final Answer:

   <tr> -> Option A

4. Quick Check:

   Row tag = <tr> [OK]

Hint: Rows use <tr>, cells use <td> or <th> [OK]

Common Mistakes:

• Confusing <tr> with <td>
• Using <th> for rows
• Using <table> for rows

2. Which is the correct way to start a table header section in HTML?

easy

A. <thead>

B. <tbody>

C. <tfoot>

D. <th>

Solution

1. Step 1: Identify header section tag

   The <thead> tag defines the header section of a table.

2. Step 2: Differentiate from body and footer

   <tbody> is for body rows, <tfoot> for footer, and <th> is a cell tag.

3. Final Answer:

   <thead> -> Option A

4. Quick Check:

   Header section = <thead> [OK]

Hint: Table header section starts with <thead> [OK]

Common Mistakes:

• Using <tbody> for header
• Using <th> as section tag
• Confusing <tfoot> with header

3. What will the following HTML code display?

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

medium

A. A table with one column named NameAge and one row with Alice30

B. A table with two columns: Name and Age, and one row with Alice and 30

C. An error because <th> cannot be inside <tr>

D. A table with two rows but no columns

Solution

1. Step 1: Analyze table header row

   The first <tr> has two <th> cells: 'Name' and 'Age', creating two columns.

2. Step 2: Analyze data row

   The second <tr> has two <td> cells: 'Alice' and '30', filling the columns.

3. Final Answer:

   A table with two columns: Name and Age, and one row with Alice and 30 -> Option B

4. Quick Check:

   Headers + data cells = two columns, one data row [OK]

Hint: Headers create columns; data fills rows [OK]

Common Mistakes:

• Thinking <th> can't be in <tr>
• Merging headers into one column
• Ignoring data cells

4. Find the error in this table code:

<table>
  <tr><td>Item</td><td>Price</td></tr>
  <td>Book</td><td>$10</td>
</table>

medium

A. Table must have <thead> and <tbody> tags

B. Using <td> inside <table> is invalid

C. Missing <tr> tags around second row cells

D. Price cell should use <th> instead of <td>

Solution

1. Step 1: Check row structure

   The second row cells <td>Book</td><td>$10</td> are not wrapped inside a <tr> tag, which is required.

2. Step 2: Validate table syntax

   Each row must be inside <tr>. Missing it causes invalid structure.

3. Final Answer:

   Missing <tr> tags around second row cells -> Option C

4. Quick Check:

   Rows need <tr> tags [OK]

Hint: Every row's cells must be inside <tr> [OK]

Common Mistakes:

• Omitting <tr> tags
• Thinking <td> can be direct child of <table>
• Confusing <th> and <td> usage

5. You want to create a table with a caption, a header row, a body with two rows, and a footer row. Which is the correct structure?

hard

A. <table><caption>Title</caption><thead><tr><td>H1</td></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

B. <table><thead><caption>Title</caption><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

C. <table><caption>Title</caption><tbody><tr><th>H1</th></tr><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

D. <table><caption>Title</caption><thead><tr><th>H1</th></tr></thead><tbody><tr><td>B1</td></tr><tr><td>B2</td></tr></tbody><tfoot><tr><td>F1</td></tr></tfoot></table>

Solution

1. Step 1: Confirm caption placement

   The <caption> tag must be directly inside <table>, before <thead>.

2. Step 2: Check header, body, and footer tags

   <thead> contains header row with <th>, <tbody> has two data rows, and <tfoot> has footer row.

3. Step 3: Validate cell tags in header

   Header cells use <th>, not <td>.

4. Final Answer:

   Correct structure: caption first, thead with th, tbody with two rows, tfoot -> Option D

5. Quick Check:

   Caption + thead + tbody + tfoot correct order [OK]

Hint: Caption first, then thead, tbody, tfoot with proper cells [OK]

Common Mistakes:

• Placing caption inside thead
• Using <td> in header
• Omitting tbody
• Wrong tag order