HtmlHow-ToBeginner · 3 min read

How to Add Header to Table in HTML: Simple Guide

To add a header to a table in HTML, use the <thead> element to group header rows and the <th> element inside table rows to define header cells. These tags help browsers and users understand the table structure clearly.

📐

Syntax

The table header is created using the <thead> tag, which groups the header rows. Inside <thead>, use <tr> for table rows and <th> for header cells. The rest of the table data goes inside <tbody>.

<thead>: Wraps the header section of the table.
<tr>: Defines a row in the table.
<th>: Defines a header cell, usually bold and centered by default.

html

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

Output

A table with one header row containing three bold, centered header cells labeled 'Header 1', 'Header 2', and 'Header 3', and one data row below with normal cells.

💻

Example

This example shows a simple table with a header row using <thead> and <th>. The header cells are bold and centered by default, making the table easier to read.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Header Example</title>
</head>
<body>
  <table border="1" style="border-collapse: collapse; width: 50%;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>30</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>25</td>
        <td>Los Angeles</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Output

A table with a header row showing 'Name', 'Age', and 'City' in bold and centered cells, followed by two rows of data with names, ages, and cities.

⚠️

Common Pitfalls

Some common mistakes when adding headers to tables include:

Using <td> instead of <th> for header cells, which loses semantic meaning and default styling.
Not wrapping header rows inside <thead>, which can affect accessibility and styling.
Placing header cells outside of a <tr> row, which is invalid HTML.

Correct usage ensures better accessibility and consistent styling.

html

<!-- Wrong way -->
<table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

<!-- Right way -->
<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>

Output

The first table shows normal cells used as headers with no bold or semantic meaning; the second table shows proper header cells that are bold and recognized as headers.

📊

Quick Reference

, , or

Tag	Purpose	Notes

Groups header rows	Optional but recommended for semantics

Defines a table row	Used inside
		Defines a header cell	Bold and centered by default

Groups body rows	Contains main data rows
		Defines a data cell	Used for regular table data

✅

Key Takeaways

Use to group header rows and for header cells inside table rows.

Header cells () are bold and centered by default, improving readability.

Always wrap header rows in for better structure and accessibility.

Avoid using for headers to keep semantic meaning and styling.

Place all header cells inside a row to keep valid HTML.