Table headers in HTML - Browser Rendering Trace

Render Flow - Table headers

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 header role

↓

Add text content

↓

Close TH

↓

Close TR

↓

Close THEAD

↓

Read <tbody>

→Create TBODY node as child

↓

Read <tr>

→Create TR node as child

↓

Read <td>

→Create TD node as child

↓

Add text content

↓

Close TD

↓

Close TR

↓

Close TBODY

↓

Close TABLE

The browser reads the table element and builds a tree with table, thead, tbody, tr, th, and td nodes, assigning semantic roles and preparing for layout.

Render Steps - 5 Steps

Code Added:<table> element with no styles

Before

[empty page]

→

After

[table outline]
[  ]
[  ]

The table element creates a rectangular box on the page but no visible borders or content yet.

🔧 Browser Action:Creates TABLE box and prepares layout

Code Sample

A simple table with two headers and two data cells, styled with borders and distinct header background.

HTML

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

HTML

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #333;
  padding: 0.5rem;
  text-align: left;
}
th {
  background-color: #f0f0f0;
  font-weight: bold;
}

Render Quiz - 3 Questions

After applying step 3, what do you see inside the table?

A A header row with two headers and a body row with two data cells

B Only a header row with two headers

C Only a body row with two data cells

D An empty table with no rows

Common Confusions - 3 Topics

Why do my <th> cells appear bold and centered by default?

Browsers apply default styles to <th> elements to make them stand out as headers, including bold font and center alignment. This is why they look different from <td> cells even without CSS.

💡 Remember: <th> has built-in bold and center styles; override with CSS if needed.

Why does my table have space between borders even though I set border on cells?

By default, tables use separate border model, causing space between cell borders. Using CSS property border-collapse: collapse removes that space and merges borders.

💡 Use border-collapse: collapse to remove gaps between cell borders.

Why does the header row repeat on every printed page?

The <thead> element is designed to repeat on each printed page automatically, helping readers understand table headers on multi-page printouts.

💡 Use <thead> for headers you want repeated on print.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<table>	table	Container for tabular data	Creates table box with rows and cells
<thead>	table-header-group	Groups header rows	Displays header rows at top, repeated on print
<tbody>	table-row-group	Groups body rows	Displays body rows below header
<tr>	table-row	Table row	Arranges cells horizontally
<th>	table-cell	Header cell	Bold text, centered by default, acts as header
<td>	table-cell	Data cell	Normal cell for data, left aligned by default

Concept Snapshot

Table headers use the <th> element inside <thead> to define header cells. <th> cells are bold and centered by default. Tables have rows (<tr>) containing header (<th>) or data (<td>) cells. Use border-collapse: collapse to merge cell borders. <thead> groups header rows and repeats on print. <td> cells hold normal data, left aligned by default.

Practice

1. What is the main purpose of the <th> tag in an HTML table?

easy

A. To define a header cell that labels a column or row

B. To create a normal data cell in a table

C. To add a caption above the table

D. To merge multiple cells into one

Solution

1. Step 1: Understand the role of <th>

   The <th> tag is used to create header cells in a table, which label columns or rows.

2. Step 2: Differentiate from other tags

   The <td> tag creates normal data cells, not headers. Captions use <caption>, and merging cells uses colspan or rowspan.

3. Final Answer:

   To define a header cell that labels a column or row -> Option A

4. Quick Check:

   Table headers = <th> tag [OK]

Hint: Headers label columns or rows using <th> tags [OK]

Common Mistakes:

• Confusing <th> with <td>
• Thinking <th> merges cells
• Using <caption> as header cells

2. Which of the following is the correct syntax to create a table header cell for a column named "Name"?

easy

A. Name

B. Name

C. Name

D. Name

Solution

1. Step 1: Identify the tag for header cells

   The correct tag for a table header cell is <th>.

2. Step 2: Check the options

   <td> is for data cells, <header> is a page section tag, and <thead> groups header rows but does not create individual cells.

3. Final Answer:

   <th>Name</th> -> Option D

4. Quick Check:

   Header cell = <th> [OK]

Hint: Use <th> for header cells, not <td> or <header> [OK]

Common Mistakes:

• Using <td> instead of <th>
• Confusing <thead> with <th>
• Using non-table tags like <header>

3. Given the following HTML snippet, what will be the visual effect of the <th> elements in most browsers?

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

medium

A. The header cells will look the same as data cells

B. The header cells will be italic and left-aligned

C. The header cells will be bold and centered by default

D. The header cells will be hidden from view

Solution

1. Step 1: Understand default browser styles for <th>

   Browsers typically render <th> cells with bold text and center alignment to distinguish headers.

2. Step 2: Compare with data cells

   Data cells (<td>) are usually normal weight and left-aligned by default.

3. Final Answer:

   The header cells will be bold and centered by default -> Option C

4. Quick Check:

   <th> = bold + center [OK]

Hint: Headers appear bold and centered by default [OK]

Common Mistakes:

• Thinking headers are italic
• Assuming headers look like data cells
• Believing headers are hidden

4. Identify the error in this table header code:

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

medium

A. The second header cell uses <th> instead of <td>

B. The first header cell closes with </td> instead of </th>

C. The <tr> tag is not closed

D. The <thead> tag is missing

Solution

1. Step 1: Check tag consistency in header cells

   The first header cell starts with <th> but incorrectly closes with </td>, which is invalid.

2. Step 2: Verify other tags

   The <thead> and <tr> tags are correctly used and closed. The second header cell uses <th> correctly.

3. Final Answer:

   The first header cell closes with </td> instead of </th> -> Option B

4. Quick Check:

   Matching tags for <th> = </th> [OK]

Hint: Match opening and closing tags exactly for <th> [OK]

Common Mistakes:

• Mixing <th> and <td> tags
• Forgetting to close <tr> or <thead>
• Using <td> inside <thead>

5. You want to create a table where the first column uses header cells to label each row, and the top row uses header cells to label each column. Which is the correct way to do this?

hard

A. Col1Col2Row1Data1Data2

B. Col1Col2Row1Data1Data2

C. Col1Col2Row1Data1Data2

D. Col1Col2Row1Data1Data2

Solution

1. Step 1: Use <th> for both column and row headers

   The top row headers and the first column headers should use <th> tags to indicate headers.

2. Step 2: Check the provided options

   Col1Col2Row1Data1Data2 correctly uses <th> in the top row and first column. The empty <th> in the top-left corner aligns headers properly.

3. Final Answer:

   Option A uses <th> for both row and column headers correctly -> Option A

4. Quick Check:

   Row and column headers = <th> tags [OK]

Hint: Use <th> for headers in both top row and first column [OK]

Common Mistakes:

• Using <td> for headers in the first column
• Leaving top-left cell empty without <th>
• Mixing <td> and <th> incorrectly