HTML Table Headers: Complete Guide with Examples

HTML Table Headers

HTML table headers are used to identify and describe the information presented in a table. They make tables easier to read and understand for both users and web browsers. In HTML, table headers are created with the <th> element.

A table header usually appears at the top of a column or at the beginning of a row. For example, a student table might use Name, Class, Age, and Marks as headers.

Using proper table headers is an important part of writing clean, meaningful, and accessible HTML.

What Is an HTML Table Header?

An HTML table header is a cell that describes the data in a table column or row.

The <th> element stands for Table Header.

A simple example is:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>21</td>
    <td>Delhi</td>
  </tr>
</table>

In this example:

• Name is the header for the first column.
• Age is the header for the second column.
• City is the header for the third column.
• <td> contains ordinary table data.
• <th> identifies header cells.

By default, browsers generally display <th> content in bold and centered text, although CSS can change its appearance.

<th> vs <td>

The two most commonly used table-cell elements are <th> and <td>.

For example:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>₹800</td>
  </tr>
</table>

Here, Product and Price are headers, while Keyboard and ₹800 are data.

Using <td> for headers may make the table look similar visually after CSS is applied, but it does not provide the same semantic meaning as <th>.

Basic Syntax of <th>

The basic syntax is:

<th>Header Text</th>

It is normally placed inside a <tr> element:

<tr>
  <th>Header 1</th>
  <th>Header 2</th>
</tr>

A complete table can look like this:

<table>
  <tr>
    <th>Country</th>
    <th>Capital</th>
    <th>Population</th>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
    <td>Large</td>
  </tr>
  <tr>
    <td>Japan</td>
    <td>Tokyo</td>
    <td>Large</td>
  </tr>
</table>

Why Are Table Headers Important?

Table headers are more than just a way to make text bold. They provide structure and meaning to a table.

1. They make tables easier to understand

Readers can quickly identify what each column or row represents.

For example:

Name     Age     City
Amit     25      Mumbai
Priya    23      Pune

The headers tell readers exactly what the values below them mean.

2. They improve accessibility

People who use screen readers may navigate tables differently from sighted users. Proper <th> elements help assistive technologies understand the relationship between headings and data cells.

This is particularly important for large or complex tables.

3. They provide semantic meaning

HTML is not only about how a webpage looks. Semantic HTML explains what different parts of a page mean.

<th> tells the browser:

This cell is a heading for table information.

That is more meaningful than simply using a normal <td> element and styling it to look like a heading.

4. They improve maintainability

Semantic HTML makes code easier for developers to understand.

Compare:

<td><strong>Name</strong></td>

with:

<th>Name</th>

The second version immediately communicates that Name is a table heading.

Column Headers

The most common type of table header is a column header.

For example:

<table>
  <tr>
    <th>Student</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>Science</td>
    <td>85</td>
  </tr>
</table>

Here, each <th> describes the column below it.

The structure is:

Student | Subject | Marks
Ravi    | Science | 85

Row Headers

A <th> can also be used as a row header.

For example:

<table>
  <tr>
    <th>Monday</th>
    <td>Math</td>
    <td>Science</td>
  </tr>
  <tr>
    <th>Tuesday</th>
    <td>English</td>
    <td>History</td>
  </tr>
</table>

In this example, Monday and Tuesday identify the rows.

This is useful when each row represents a particular item, person, date, category, or other meaningful entity.

The scope Attribute

The scope attribute can be used with <th> to describe what a header applies to.

Common values include:

• col
• row
• colgroup
• rowgroup

scope="col"

Use scope="col" when the header describes a column.

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Arun</td>
    <td>24</td>
    <td>Bhubaneswar</td>
  </tr>
</table>

This explicitly tells assistive technologies that these headers apply to columns.

scope="row"

Use scope="row" when the header describes a row.

<table>
  <tr>
    <th scope="row">Monday</th>
    <td>Math</td>
    <td>English</td>
  </tr>
  <tr>
    <th scope="row">Tuesday</th>
    <td>Science</td>
    <td>History</td>
  </tr>
</table>

Here, Monday and Tuesday are row headers.

scope="colgroup"

The colgroup value can be used when a header applies to a group of columns.

For example:

<table>
  <tr>
    <th colspan="2" scope="colgroup">Student Information</th>
    <th colspan="2" scope="colgroup">Results</th>
  </tr>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Class</th>
    <th scope="col">Math</th>
    <th scope="col">Science</th>
  </tr>
</table>

The first header row groups the columns into larger categories.

scope="rowgroup"

rowgroup can identify a header that applies to a group of rows.

It is less common than row and col, but it can be useful for complex tables where several rows belong to the same category.

Using colspan with Table Headers

The colspan attribute allows a header cell to span multiple columns.

Example:

<table>
  <tr>
    <th colspan="3">Employee Information</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>IT</td>
    <td>₹50,000</td>
  </tr>
</table>

The first <th> covers three columns.

colspan="3" means that the cell occupies the space of three columns.

Using rowspan with Table Headers

The rowspan attribute allows a header to cover multiple rows.

Example:

<table>
  <tr>
    <th rowspan="2">Department</th>
    <th>Employee</th>
    <th>Salary</th>
  </tr>
  <tr>
    <th>Experience</th>
    <th>Location</th>
  </tr>
</table>

The Department header spans two rows.

This can be useful when creating tables with multiple levels of headings.

Multi-Level Table Headers

Some tables need more than one header row.

For example:

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Marks</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>90</td>
    <td>88</td>
  </tr>
</table>

The first row creates a broad Marks heading, while the second row identifies the individual subjects.

For complicated tables, correct header relationships become especially important.

Using <thead> with Table Headers

HTML also provides the <thead> element.

<thead> represents the header section of a table.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Rahul</td>
      <td>25</td>
      <td>Delhi</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>23</td>
      <td>Pune</td>
    </tr>
  </tbody>
</table>

Using <thead> is not required for every simple table, but it gives the table a clearer structural organization.

<thead>, <tbody>, and <tfoot>

A well-structured table can have three main sections:

• <thead> — table header section
• <tbody> — main table data
• <tfoot> — table footer section

Example:

<table>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Quantity</th>
      <th scope="col">Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Book</td>
      <td>2</td>
      <td>₹500</td>
    </tr>
    <tr>
      <td>Pen</td>
      <td>5</td>
      <td>₹100</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>7</td>
      <td>₹600</td>
    </tr>
  </tfoot>
</table>

Notice that <tfoot> can also contain a <th> when a label such as Total acts as a row header.

Styling HTML Table Headers with CSS

HTML defines the structure of a table. CSS can be used to control its appearance.

For example:

<style>
  th {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: left;
  }

  td {
    padding: 10px;
  }
</style>

The HTML can remain semantic while CSS handles the visual design.

A more complete example:

<table>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>₹50,000</td>
      <td>Available</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>₹15,000</td>
      <td>Available</td>
    </tr>
  </tbody>
</table>

Default Appearance of <th>

Most browsers apply default styling to <th> elements.

Typically, a browser displays header text:

• in bold
• centered horizontally
• as part of the table structure

However, you should not depend on the browser’s default appearance.

For professional websites, use CSS to create the design you want.

For example:

th {
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid #333;
}

Can <th> Be Used Without <thead>?

Yes.

This is valid:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>20</td>
  </tr>
</table>

The <thead> element is not mandatory for using <th>.

However, <thead> can make the structure clearer, especially in larger tables.

Can <th> Be Used in <tbody>?

Yes.

A <th> does not have to appear only inside <thead>.

For example, row headers can appear in the table body:

<table>
  <tbody>
    <tr>
      <th scope="row">Monday</th>
      <td>10</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">Tuesday</th>
      <td>15</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Here, the <th> elements identify each row.

HTML Table Headers and Accessibility

Accessibility is one of the most important reasons to use <th> correctly.

A visual reader can often understand a table by looking at the layout. A screen-reader user may need semantic information to understand which headings belong to which data.

For simple tables, this is often enough:

<th scope="col">Name</th>

For row headers:

<th scope="row">Monday</th>

For more complex tables, additional header relationships may be needed.

The headers Attribute

The headers attribute can associate a data cell with one or more header cells.

This is particularly useful for complex tables.

Example:

<table>
  <tr>
    <th id="name">Name</th>
    <th id="marks">Marks</th>
  </tr>
  <tr>
    <td headers="name">Rahul</td>
    <td headers="marks">90</td>
  </tr>
</table>

The id of the header is referenced by the headers attribute of the data cell.

For simple tables, scope is generally easier to use. The headers and id approach becomes more useful when relationships between cells are complicated.

Good Example of Accessible Table Headers

<table>
  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Subject</th>
      <th scope="col">Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ravi</td>
      <td>Mathematics</td>
      <td>92</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>Science</td>
      <td>89</td>
    </tr>
  </tbody>
</table>

This is simple, semantic, readable, and easy to maintain.

HTML Table Headers vs Heading Elements

A common mistake is confusing a table header with an HTML heading such as <h2>.

They have different purposes.

<h1> to <h6>

These elements create headings for sections of a webpage.

Example:

<h2>Student Results</h2>

<th>

This identifies a heading within a table.

Example:

<th scope="col">Student</th>

A table heading is not a replacement for a page heading.

Do Not Use <h1> Inside Every Table Header

A table does not need an <h1> simply because it has headings.

For example, this is usually unnecessary:

<th><h1>Name</h1></th>

Instead, use:

<th scope="col">Name</th>

If the table itself needs a visible title, consider using a suitable heading outside the table or a <caption>.

Using <caption> for a Table Title

The <caption> element provides a title or description for a table.

Example:

<table>
  <caption>Student Examination Results</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rahul</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

The difference is simple:

• <caption> describes the table as a whole.
• <th> describes a row or column within the table.

Common Mistakes with HTML Table Headers

Using <td> instead of <th>

Incorrect:

<tr>
  <td>Name</td>
  <td>Age</td>
</tr>

If these cells identify columns, use:

<tr>
  <th scope="col">Name</th>
  <th scope="col">Age</th>
</tr>

Making a <td> Look Like a Header

Adding CSS such as font-weight: bold does not turn a data cell into a semantic header.

This:

<td class="header">Name</td>

is still a data cell.

Use:

<th scope="col">Name</th>

instead.

Using <th> for Every Cell

Not every cell should be a table header.

For example:

<tr>
  <th>Rahul</th>
  <th>25</th>
  <th>Delhi</th>
</tr>

If these are ordinary data values, they should generally be <td> elements.

Forgetting Header Relationships

For simple tables, browsers can often infer the relationships. However, explicitly using scope can make the intended structure clearer.

<th scope="col">Price</th>

is more informative than:

<th>Price</th>

especially for accessibility.

Using Tables for Page Layout

HTML tables should primarily be used for tabular data, not for designing the overall layout of a webpage.

Avoid using tables to position:

• navigation menus
• page columns
• images
• buttons
• general page sections

Modern CSS layout tools such as Flexbox and Grid are better suited for page layout.

Best Practices for HTML Table Headers

For clean and accessible HTML, follow these practices:

1. Use <th> for actual table headers.
2. Use <td> for ordinary data.
3. Use <thead> when it improves the table’s structure.
4. Use scope="col" for column headers.
5. Use scope="row" for row headers.
6. Use colspan and rowspan carefully for grouped headings.
7. Use <caption> when a table needs a title or description.
8. Keep header text short and meaningful.
9. Use CSS for appearance instead of changing semantic HTML.
10. Consider accessibility when designing complex tables.
11. Do not use tables as a replacement for CSS page layout.
12. Keep table structures logical and easy to follow.

A Complete HTML Table Header Example

Here is a practical example combining several important concepts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Results</title>

  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      border: 1px solid #ccc;
      padding: 10px;
    }

    th {
      text-align: left;
    }
  </style>
</head>
<body>

  <table>
    <caption>Student Examination Results</caption>

    <thead>
      <tr>
        <th scope="col">Student Name</th>
        <th scope="col">English</th>
        <th scope="col">Mathematics</th>
        <th scope="col">Science</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">Rahul</th>
        <td>85</td>
        <td>92</td>
        <td>88</td>
      </tr>

      <tr>
        <th scope="row">Priya</th>
        <td>90</td>
        <td>87</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

This example demonstrates both column and row headers. Student Name, English, Mathematics, and Science are column headers, while Rahul and Priya act as row headers.

HTML Table Headers in Responsive Designs

Tables can become difficult to read on small screens when they contain many columns.

The header itself does not make a table responsive. CSS is normally used to handle smaller screens.

One simple approach is horizontal scrolling:

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Department</th>
        <th scope="col">Experience</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ravi</td>
        <td>ravi@example.com</td>
        <td>IT</td>
        <td>5 years</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

.table-container {
  overflow-x: auto;
}

This allows users to scroll horizontally when the table is wider than the available screen.

Are HTML Table Headers Important for SEO?

Table headers are primarily about semantic structure, usability, and accessibility, rather than being a direct ranking factor.

However, well-structured HTML can help search engines better understand the content and relationships within a webpage.

A clear table can also improve the user experience, which is valuable for a quality website.

Do not add keywords to table headers simply for SEO. Header text should accurately describe the data.

For example:

<th scope="col">Product Name</th>

is better than creating an unnatural keyword-filled header.

HTML Table Headers in HTML5

The <th> element remains a standard HTML element and is an important part of semantic table markup.

HTML5 provides several elements that help organize tables:

<table>
  <caption>Sales Report</caption>

  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>₹50,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>₹50,000</td>
    </tr>
  </tfoot>
</table>

These elements make the table easier to understand and maintain.

Frequently Asked Questions

What is <th> in HTML?

<th> is the HTML element used to define a table header cell. It identifies information that describes a column or row.

What does <th> stand for?

<th> stands for Table Header.

What is the difference between <th> and <td>?

<th> represents a header cell, while <td> represents a normal data cell.

Can <th> be used for row headers?

Yes. A <th> can identify a row header. Using scope="row" clearly indicates that relationship.

What is scope="col"?

scope="col" indicates that a table header applies to a column.

What is scope="row"?

scope="row" indicates that a table header applies to a row.

Is <thead> required when using <th>?

No. You can use <th> without <thead>. However, <thead> can provide useful structural organization.

Can a table have multiple header rows?

Yes. Multiple header rows can be created using multiple <tr> elements, often combined with rowspan and colspan.

Can <th> contain HTML elements?

Yes. A <th> can contain appropriate phrasing content, such as text and inline elements.

Example:

<th scope="col"><strong>Price</strong></th>

However, unnecessary markup should be avoided.

Can <th> be used inside <tbody>?

Yes. It is common to use <th scope="row"> inside <tbody> when each row has its own identifying header.

Should I use CSS to make <td> look like a header?

No, if the cell is semantically a header. Use <th> instead and use CSS to control its appearance.

Are table headers important for accessibility?

Yes. Proper table headers help users understand the relationships between table headings and data, particularly when using assistive technologies.

What is the purpose of <caption>?

<caption> provides a title or description for the table as a whole. It is different from <th>, which identifies individual row or column headings.

Conclusion

HTML table headers provide the semantic structure needed to explain the information inside a table. The <th> element is the correct choice for cells that identify columns or rows, while <td> should be used for ordinary table data.

For simple tables, <th> may be all you need. For more accessible and structured tables, consider using <thead>, <tbody>, <tfoot>, <caption>, and the scope attribute. When tables become more complex, headers and id relationships can also help describe connections between header and data cells.

The most important rule is simple: use <th> when a cell describes other cells, and use <td> when a cell contains the actual data. This keeps your HTML meaningful, accessible, maintainable, and easier for both people and machines to understand.