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.

Practice

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

easy

A. <tr>

B. <td>

C. <th>

D. <table>

Solution

1. Step 1: Understand table structure

   A table is made of rows and columns. Rows group cells horizontally.

2. Step 2: Identify the row tag

   The <tr> tag defines a table row, while <td> and <th> define cells inside 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 <td> as row tag
• Using <th> for rows instead of headers
• Using <table> as row tag

2. Which of the following is the correct way to create a table header cell?

easy

A. <table>Header</table>

B. <td>Header</td>

C. <tr>Header</tr>

D. <th>Header</th>

Solution

1. Step 1: Know header cell tags

   Table headers use <th> tags to label columns or rows.

2. Step 2: Check the options

   Only <th>Header</th> uses <th> correctly for a header cell.

3. Final Answer:

   <th>Header</th> -> Option D

4. Quick Check:

   Headers use <th> tags [OK]

Hint: Headers always use <th>, not <td> [OK]

Common Mistakes:

• Using <td> for headers
• Using <tr> or <table> as cells
• Missing closing tags

3. What will the following HTML code display in a browser?

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

medium

A. An error because <th> cannot be used inside <tr>.

B. A list of names and ages without any table structure.

C. A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'.

D. A table with one column and two rows.

Solution

1. Step 1: Analyze the table structure

   The first row uses <th> for headers 'Name' and 'Age'. The second row uses <td> for data 'Alice' and '30'.

2. Step 2: Understand rendering

   This creates a table with two columns labeled 'Name' and 'Age', and one data row with 'Alice' and '30'.

3. Final Answer:

   A table with two columns labeled 'Name' and 'Age', and one row with 'Alice' and '30'. -> Option C

4. Quick Check:

   Headers + data rows = labeled table [OK]

Hint: Headers in first row, data in next rows form columns [OK]

Common Mistakes:

• Thinking <th> cannot be inside <tr>
• Confusing table with list
• Assuming one column only

4. Identify the error in this table code:

<table>
  <tr>
    <td>Item 1</td>
  <tr>
    <td>Item 2</td>
  </tr>
</table>

medium

A. Table tag is not closed.

B. Missing closing tag for the first <tr>.

C. Using <td> instead of <th> for headers.

D. Extra closing tag at the end.

Solution

1. Step 1: Check row tags

   The first <tr> is opened but not closed before the second <tr> starts.

2. Step 2: Confirm correct nesting

   Each <tr> must have a matching closing </tr>. Here, the first row is missing its closing tag.

3. Final Answer:

   Missing closing tag for the first <tr>. -> Option B

4. Quick Check:

   Every needs a closing [OK]

Hint: Check every has a matching [OK]

Common Mistakes:

• Ignoring missing closing tags
• Confusing <td> and <th> errors
• Assuming table tag is unclosed

5. You want to create a table with 3 columns: 'Product', 'Price', and 'Stock'. The first row should be headers. Which code snippet correctly creates this table structure?

hard

A. <table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</table>

B. <table>
<tr>
<td>Product</td>
<td>Price</td>
<td>Stock</td>
</tr>
</table>

C. <table>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</table>

D. <table>
<tr>
<th>Product</th>
<td>Price</td>
<td>Stock</td>
</tr>
</table>

Solution

1. Step 1: Identify header row requirements

   The first row should use <th> tags for all three headers to label columns.

2. Step 2: Check each option

   <table>
     <tr>
       <th>Product</th>
       <th>Price</th>
       <th>Stock</th>
     </tr>
   </table>

   correctly uses <th> inside a <tr> for all headers.

   <table>
     <tr>
       <td>Product</td>
       <td>Price</td>
       <td>Stock</td>
     </tr>
   </table>

   uses <td> which is for data cells, not headers.

   <table>
     <th>Product</th>
     <th>Price</th>
     <th>Stock</th>
   </table>

   places <th> directly inside <table> without a row.

   <table>
     <tr>
       <th>Product</th>
       <td>Price</td>
       <td>Stock</td>
     </tr>
   </table>

   mixes <th> and <td> in the header row, which is incorrect.

3. Final Answer:

   <pre><table> <tr> <th>Product</th> <th>Price</th> <th>Stock</th> </tr> </table></pre> -> Option A

4. Quick Check:

   Headers = all <th> in a <tr> [OK]

Hint: Headers row uses all <th> inside one <tr> [OK]

Common Mistakes:

• Using <td> for headers
• Placing <th> outside <tr>
• Mixing <th> and <td> in header row