The <th> tag defines a table header cell. It goes inside <tr>, usually in <thead>. Header cells are bold by default. Use <th> for column or row headers; use <td> for data cells.

<th>

Example: <table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Alice</td><td>95</td></tr></tbody></table>. Use thead for header rows. Use scope="col" or scope="row" on <th> to associate headers with cells for screen readers.

<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
</thead>

scope="col" = header for column. scope="row" = header for row. Use abbr for abbreviated header text (screen readers). colspan and rowspan work on th like on td. Use id on th when <td> uses headers attribute.

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

In the browser, <th> cells render bold by default. Screen readers use scope to announce which header applies to each cell. Always use thead and th for header rows in data tables.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

Which element represents a header cell in a table (bold by default)?

<th>

Correct! <th> is for header cells (bold). <td> is for data cells. Use scope on th for accessibility.

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

You now know <th>. Complete the challenges below to master table header cells!

th.html

1 / 7

📋

Tutor AIThe <th> tag defines a table header cell. It goes inside <tr>, usually in <thead>. Header cells are bold by default. Use <th> for column or row headers; use <td> for data cells.

⭐ 0 EXP

TH Mastery

Table header cells: th, scope, thead.

Concept 1: The TH Tag

The <th> tag defines a table header cell. It goes inside <tr>, usually in <thead>. Header cells are bold by default. Use <td> for data cells.

System Check

Which element represents a header cell in a table (bold by default)?

Community Holo-Net

Connect with fellow developers. Share your elegant table structures.

Table Header Patterns

Have a clever way to style or structure complex headers?

Latest Transmissions

@dev_sarah posted a responsive table trick.

@coder_x asks about multiple header rows.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

Understanding the HTML <th> Tag

Mastering semantic table headers for clear, accessible, and structured data presentation on the web.

Pascual Vila

Lead Architect & Frontend Instructor

Building the next generation of web developers through interactive and structural learning methodologies.

Core Functionality

The <th> tag defines a table header cell within an HTML table. It acts as a structural anchor, placed inside a <tr> (table row), and usually confined within a <thead> section for optimal semantic clarity. Visual user agents typically render the text inside a <th> as bold and centered by default, distinguishing it from standard <td> (data) cells.

The Importance of Scope

To build robust, accessible tables, the scope attribute is paramount. Applying scope="col" explicitly dictates that the header applies to the entire column below it. Conversely, scope="row" denotes a header for the adjacent row. Screen reading technologies rely heavily on this attribute to accurately vocalize complex data grids to visually impaired users.

Advanced Attributes & Best Practices

Structural Integrity: Always encapsulate your primary header rows within a <thead> tag.
Accessibility First: Supplement complex tables with a <caption> element to provide context before the table is parsed.
Complex Relations: For highly intricate, multi-level tables, leverage the id attribute on <th> elements and the corresponding headers attribute on <td> elements to create explicit programmatic linkages.
Abbreviations: Use the abbr attribute within <th> when the visual header text is lengthy but requires a succinct fallback for auditory interfaces.

TH Tag Glossary

<th>: Table header cell. Placed inside <tr>, typically within <thead>. Rendered visually bold by default. Essential for columns and row labeling.
scope: Defines the domain of the header. col maps it to the vertical column, while row maps it horizontally. Crucial for assistive technologies.
<thead>: A semantic container dedicated to grouping the header content in an HTML table, separating it from the main body data (<tbody>).
abbr / id / headers: Advanced accessibility tools. abbr provides short alternatives, while id and headers create explicit data cell to header mapping.

📖 INDEX