What is the difference between and ?

is used for table headers, and its content is bold and centered by default. is used for table data cells, and its content is left-aligned by default.

Can I use the tag without a ?

No, the tag must be used inside a tag. It is specifically designed for creating table headers.

Table of contents

Introduction

Definition and Usage

Syntax

Attributes of the <th> Tag

4.1.

1. colspan

4.2.

2. rowspan

4.3.

3. scope

4.4.

4. align (Deprecated)

Examples

5.1.

Example 1: Simple Table with Headers

5.2.

Example 2: Using colspan and rowspan Together

Supported Browsers

Frequently Asked Questions

7.1.

What is the purpose of the <th> tag?

7.2.

Can I use the <th> tag without a <table>?

7.3.

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

Conclusion

Last Updated: Jan 18, 2025

Easy

<th> Tag in HTML

Author Gaurav Gandhi

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

The <th> tag in HTML is used to define a table header cell. It is typically used in tables to mark a cell that will hold a heading for a particular column or row. The content inside a <th> tag is usually bold and centered by default to distinguish it from regular table data cells. This tag plays an important role in making tables more readable and organized.

In this article, we’ll discuss the syntax, attributes, examples, and browser compatibility of the <th> tag.

Definition and Usage

The `<th>` tag in HTML stands for "table header." It is used to define header cells in an HTML table. Header cells are special because they provide labels or titles for the columns or rows in a table, making it easier to understand the data. Unlike regular table cells (defined by the `<td>` tag), the content inside a `<th>` tag is bold & centered by default, which helps it stand out.

The `<th>` tag is always placed inside a `<tr>` (table row) tag. It works alongside the `<td>` tag, which defines standard table cells. While `<td>` is used for regular data, `<th>` is used for headers. This distinction is important because it helps browsers & screen readers interpret the table structure correctly, improving accessibility.

For example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
    <td>Los Angeles</td>
  </tr>
</table>

In this example:

- The `<th>` tags are used to define the headers: "Name," "Age," & "City."

- The `<td>` tags are used for the actual data: "John," "25," "New York," etc.

When you open this code in a browser, you’ll see a table with bold & centered headers, making it clear what each column represents.

The `<th>` tag also supports attributes like `colspan` & `rowspan`, which allow headers to span multiple columns or rows. For example:

<table border="1">
  <tr>
    <th colspan="2">Personal Information</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
</table>

Here, the "Personal Information" header spans two columns, combining "Name" & "Age" under one header.

If you use the `<th>` tag correctly, it not only improves the visual presentation of your tables but also enhances accessibility for users relying on screen readers.

Syntax

The basic syntax of the <th> tag is:

<th>Header Content</th>
The <th> tag is always used within the <table> tag. It is generally nested inside a <tr> (table row) tag. Here’s a minimal example of using the <th> tag:
<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
</table>

Explanation:

<table> defines the table structure.
<tr> creates a row in the table.
<th> defines header cells for that row.

Attributes of the <th> Tag

The <th> tag supports several attributes to enhance its functionality. Let’s have a look at the most commonly used ones:

1. colspan

The colspan attribute specifies how many columns the header cell should span.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Name and Age Table</title>
</head>
<body>
   <h1>Name and Age Information</h1>
   <table border="1" style="border-collapse: collapse; text-align: center; width: 50%;">
       <tr>
           <th colspan="2">Name</th>
           <th>Age</th>
       </tr>
       <tr>
           <td>John</td>
           <td>Doe</td>
           <td>25</td>
       </tr>
   </table>
</body>
</html>

Output

Explanation: The "Name" header spans two columns, combining "First Name" and "Last Name."

2. rowspan

The rowspan attribute specifies how many rows the header cell should span.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ID, Name, and Age Table</title>
</head>
<body>
   <h1>Details Table</h1>
   <table border="1" style="border-collapse: collapse; text-align: center; width: 50%;">
       <tr>
           <th rowspan="2">ID</th>
           <th>Name</th>
       </tr>
       <tr>
           <th>Age</th>
       </tr>
   </table>
</body>
</html>

Output

Explanation: The "ID" header spans two rows, while "Name" and "Age" headers occupy their respective positions in each row.

3. scope

The scope attribute helps define the scope of the header cell. It can take values such as col, row, colgroup, or rowgroup.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Product Price Table</title>
</head>
<body>
   <h1>Product Price List</h1>
   <table border="1" style="border-collapse: collapse; text-align: center; width: 50%;">
       <tr>
           <th scope="col">Product</th>
           <th scope="col">Price</th>
       </tr>
       <tr>
           <td>Phone</td>
           <td>$500</td>
       </tr>
   </table>
</body>
</html>

Output

Explanation: The scope="col" indicates that the <th> tag applies to the column it is in.

4. align (Deprecated)

This attribute specifies the alignment of the header content. It is deprecated in HTML5, so use CSS instead.

Examples

Let’s look at a few practical examples to understand the <th> tag better.

Example 1: Simple Table with Headers

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Weather Table</title>
</head>
<body>
   <h1>Weekly Weather Report</h1>
   <table border="1" style="border-collapse: collapse; text-align: center; width: 50%;">
       <tr>
           <th>Day</th>
           <th>Weather</th>
           <th>Temperature</th>
       </tr>
       <tr>
           <td>Monday</td>
           <td>Sunny</td>
           <td>30°C</td>
       </tr>
       <tr>
           <td>Tuesday</td>
           <td>Cloudy</td>
           <td>25°C</td>
       </tr>
   </table>
</body>
</html>

Output:

This creates a simple table with column headers for "Day," "Weather," and "Temperature."

Example 2: Using colspan and rowspan Together

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Table Example</title>
</head>
<body>
   <h1>Student Marks Table</h1>
   <table border="1" style="border-collapse: collapse; text-align: center; width: 50%;">
       <tr>
           <th rowspan="2">Name</th>
           <th colspan="2">Marks</th>
       </tr>
       <tr>
           <th>Math</th>
           <th>Science</th>
       </tr>
       <tr>
           <td>John</td>
           <td>85</td>
           <td>90</td>
       </tr>
       <tr>
           <td>Jane</td>
           <td>88</td>
           <td>92</td>
       </tr>
   </table>
</body>
</html>

Output:

The "Name" header spans two rows, while "Marks" header spans two columns, effectively creating a nested header structure.

Supported Browsers

The <th> tag is supported by all major browsers, including:

he updated table:

Browser	Support
Chrome	Yes
Firefox	Yes
Edge	Yes
Safari	Yes
Opera	Yes

Since the <th> tag is part of the core HTML specification, it is compatible with most modern and older browsers.

Frequently Asked Questions

What is the purpose of the <th> tag?

The <th> tag is used to create header cells in a table. These cells help organize data by labeling columns or rows, making the table content easier to understand.

Can I use the <th> tag without a <table>?

No, the <th> tag must be used inside a <table> tag. It is specifically designed for creating table headers.

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

<th> is used for table headers, and its content is bold and centered by default.
<td> is used for table data cells, and its content is left-aligned by default.

Conclusion

The <th> tag is an essential part of HTML tables, helping to define clear and structured header cells. In this article, we covered the syntax, attributes, practical examples, and browser compatibility of the <th> tag. Whether you're building simple tables or complex data grids, understanding the <th> tag is key to creating accessible and well-organized tables.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

519+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

437+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

314+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

519+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

437+ registered

View more events