Table of contents

HTML <th> Tag: Definition, Syntax, and Examples

What is HTML <th> Tag?

The HTML th tag is used to define a header cell in an HTML table. Table headers help users and search engines understand the meaning of the data in each column or row. The text inside a th tag is usually bold and centered by default.

This tag is important because it improves the readability of tables and provides clear labeling for table data. Search engines and screen readers also use table headers to understand table structure, making it useful for accessibility and SEO. The th tag is placed inside a table and used within table rows.

Syntax of the HTML <th> Tag

plaintext
<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
</table>

th defines a table header cell and is used inside tr tags. It helps label the type of information displayed in the table.

Examples of HTML <th> Tag

Example 1: Basic HTML th Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>Web Development</td>
    <td>3 Months</td>
  </tr>
</table>

</body>
</html>

In this example, the th tag creates two table header cells for Course and Duration. The data in the rows below corresponds to these headings.

Example 2: SEO Optimized th Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <tr>
    <th>Course Name - Scholar247</th>
    <th>Training Mode</th>
    <th>Course Fee</th>
  </tr>
  <tr>
    <td>Digital Marketing</td>
    <td>Online</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>Graphic Design</td>
    <td>Offline</td>
    <td>$180</td>
  </tr>
</table>

</body>
</html>

This example uses SEO-friendly header text inside the th tag. Adding “Scholar247” helps with branding and increases relevance for search visibility, especially when the table is indexed by search engines.

Attributes of the HTML <th> Tag

The th tag supports several useful attributes:

• colspan: Defines how many columns a header cell should span.
• rowspan: Defines how many rows a header cell should span.
• scope: Specifies whether the header is for a row, column, or group.
• headers: Links a header cell with one or more data cells for accessibility.
• align (deprecated): Used to align text, but CSS should be used instead.

Best Practices for HTML <th> Tag

• Use clear and descriptive text inside th tags to make table data more understandable.
• Use the scope attribute to improve accessibility and help screen readers.
• Avoid long sentences inside th cells; keep headers short and meaningful.
• Use SEO-friendly keywords when appropriate for table headers.
• Use CSS for styling the th tag instead of outdated HTML attributes.

FAQs About the HTML <th> Tag

What is the purpose of the th tag?

The th tag is used to create header cells in a table, helping users identify what data each column or row represents.

Does the th tag help with SEO?

Yes, clear and keyword-rich table headers help search engines understand the table content better, improving chances of ranking for relevant terms.

How is th different from td?

th defines a header cell, usually bold and centered, while td defines a standard data cell in a table.

Can I use multiple th tags in one row?

Yes, you can add as many th tags as needed inside a tr tag to create multiple table header columns.

Should I use scope with th for accessibility?

Yes, using scope (for example, scope="col" or scope="row") makes tables more accessible for screen readers and improves usability.

HTML

Related Articles