HTML th Table Tag – A Complete Guide for Beginners

Introduction: What Is the `<th>` Tag in HTML Tables?

HTML tables are used to present data in a row-and-column format.
To make tables easy to understand, we need headers that explain what each column or row represents.

That’s where the HTML <th> tag comes in.

The <th> tag defines table header cells, making tables clearer, more accessible, and more professional.

What Is the HTML th Tag?

The HTML <th> tag stands for Table Header.

In simple words:
<th> is used to define a heading cell in an HTML table.

Table header cells usually:

Appear bold
Are center-aligned by default
Describe the data in a column or row

Basic Syntax of `<th>` Tag

Key Points

<th> is a paired (container) tag
It must be placed inside a <tr>
<tr> must be inside a <table>

Simple Example: Table with th

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>22</td>
  </tr>
</table>

Explanation

First row uses <th> → header row
Second row uses <td> → data row
Headers explain what the data means

Difference Between th and td

Tag	Purpose
`<th>`	Table header (heading cell)
`<td>`	Table data (normal cell)

Use <th> for labels, <td> for values.

Default Styling of `<th>`

Browsers apply default styles to <th>:

Bold text
Centered text
Slight emphasis for readability

You can change this using CSS.

Using th for Column Headers (Most Common)

<table border="1">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Math</td>
    <td>90</td>
  </tr>
</table>

Each <th> describes a column

Using th for Row Headers

<table border="1">
  <tr>
    <th>Student</th>
    <td>Aman</td>
  </tr>
  <tr>
    <th>Class</th>
    <td>10</td>
  </tr>
</table>

Each <th> describes a row

The scope Attribute (Very Important)

The scope attribute improves accessibility by telling screen readers what the header applies to.

Column Header

Row Header

Common `scope` Values

Value	Meaning
`col`	Header for a column
`row`	Header for a row
`colgroup`	Header for column group
`rowgroup`	Header for row group

Best Practice: Always use scope when possible.

Using th with thead, tbody, tfoot

<table border="1">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Marks</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Neha</td>
      <td>92</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>92</td>
    </tr>
  </tfoot>
</table>

Styling `<th>` Using CSS

Change Background and Text Color

Align Header Text

Add Border to `<th>`

HTML th Tag and SEO

Helps search engines understand table data
Improves content clarity
Indirect SEO benefit through structure

Common Beginner Mistakes

Using <td> instead of <th> for headers
Forgetting the scope attribute
Using <th> for styling only
Placing <th> outside <tr>
Using <b> instead of <th>

Real-World Example: Student Marks Table

<table border="1">
  <tr>
    <th scope="col">Student Name</th>
    <th scope="col">Subject</th>
    <th scope="col">Marks</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>Math</td>
    <td>88</td>
  </tr>
</table>

FAQs: HTML th Tag

What does `<th>` stand for?

Table Header.

Can `<th>` be used in rows?

Yes, for row headers.

Is `<th>` mandatory?

Not mandatory, but strongly recommended.

Can I style `<th>` with CSS?

Yes.

Is `<th>` deprecated?

No, it is fully supported in HTML5.