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.