HTML Table Header Element Tutorial - Usage, Syntax, Attributes, faq and Example

INTRODUCTION

The <th> element is used to define header cell in an HTML table. It's used to label columns or rows and is usually placed inside a <tr> element (table row).

Display: By default, text inside a <th> is bold and centered.

<table>
    <tr>
        <th> </th>
        <th> </th>
        <th> </th>
    </tr>
    
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr> 
</table>

<table>
    <tr>
        <th>Fruit </th>
        <th>Rate </th>
        <th>Quantity </th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
    <tr>
        <td>strawberry</td>
        <td>$1.5</td>
        <td>20</td>
    </tr>
</table>

Attributes

1. abbr

The abbr attribute in a <th> (Table Header) element provides an abbreviated version of the header's content. This helps screen readers and assistive technologies read tables more clearly and efficiently, especially when full header text is long or complex.

<th abbr="Hypertext Markup Language">HTML</td>

2. colspan

The colspan attribute in HTML is used to merge multiple headers cells in a table row, allowing a single header cell to extend across multiple columns.

The value of colspan attribute should be an non-negative integer indicating how many columns the cell spans or extends. Its default value is 1. Any value greater than 1000 is dismissed by browsers and defaults to 1 in such case.

Example: In this example the Contact Information header cell spans across 2 columns.

<table border="1">
  <thead>
    <tr>
      <th rowspan="2" scope="rowgroup" id="nameHeader">Name</th>
      <th colspan="2" scope="colgroup" id="contactHeader">Contact Information</th>
    </tr>
    <tr>
      <th scope="col" id="emailHeader" headers="contactHeader">Email</th>
      <th scope="col" id="phoneHeader" headers="contactHeader">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="nameHeader">Alice</td>
      <td headers="emailHeader">alice@example.com</td>
      <td headers="phoneHeader">555-1234</td>
    </tr>
    <tr>
      <td headers="nameHeader">Bob</td>
      <td headers="emailHeader">bob@example.com</td>
      <td headers="phoneHeader">555-5678</td>
    </tr>
  </tbody>
</table>

3. rowspan

The rowspan attribute in HTML is used to merge multiple header cells in a table, allowing a single header cell to extend across multiple rows.

The value of rowspan attribute should be an non-negative integer indicating how many rows the header cell spans or extends. Its default value is 1. The maximum value is 65534. Any value greater than 65534 defaults to 65534 in such case. If the value is set to 0, the cell will extends to the end of the table.

Example: In the below example the Name header cell spans across 2 rows.

<th rowspan="2" scope="rowgroup">Name</th>

4. headers

In HTML, the headers attribute is typically used on td elements, but can also appear on <th> elements in complex tables. It is used to explicitly associate a header cell ( <th>) with other header cells (like when a <th> is nested or part of a multi-level heading structure).

The headers attribute refers to the IDs of other <th> elements that describe the current cell. It provides clear associations between headers, which is important for screen readers and accessibility tools.

It improves accessibility by helping screen readers understand the relationship between data and headers.

Example: In the below example the Rating and Bonus header cell is associated with the Performance header cell by making the id attribute of Performance header cell equal to the header attribute of Rating and Bonus header cell.

<table id="dataTable">
      <caption>Employee Performance 2025</caption>
      <thead>
        <tr>
          <th id="employee" scope="col">Employee</th>
          <th id="perf" scope="col" colspan="2">Performance</th>
        </tr>
        <tr>
          <th id="empname" headers="employee" scope="col">Name</th>
          <th id="rating" headers="perf" scope="col">Rating</th>
          <th id="bonus" headers="perf" scope="col">Bonus</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td headers="employee empname">Alice Smith</td>
          <td headers="perf rating">A</td>
          <td headers="perf bonus">8000</td>
        </tr>
        <tr>
          <td headers="employee empname">Bob Johnson</td>
          <td headers="perf rating">B</td>
          <td headers="perf bonus">5000</td>
        </tr>
        <tr>
          <td headers="employee empname">Carol White</td>
          <td headers="perf rating">A</td>
          <td headers="perf bonus">7500</td>
        </tr>
      </tbody>
</table>

5. scope

The scope attribute in an HTML (table header) element specifies the set of cells the table header is associated with. It helps improve accessibility and semantics by clarifying whether the header applies to a row, column, or a group of cells. This attribute is used only with HTML <th> element. This attribute is discussed in detailed in our blogpost named HTML Table Scope Attribute Made Easy: A Complete Beginner's Guide.

Possible Values

The possible values of this attribute is listed below.

• row
• col
• rowgroup
• colgroup

<table>
    <tr>
        <th scope="row">John</th>
        <td>25</td>
        <td>USA</td>
    </tr>
    <tr>
        <th scope="row">Emma</th>
        <td>30</td>
        <td>UK</td>
    </tr>
</table>

Deprecated Attributes

The following attribute are Deprecated and is advised to not use them. They are mentioned just for reference for updating legacy code or for historical interest.

• align
• align
• bgcolor
• char
• charoff
• valign
• height
• width

Tag Omission

• The start tag for <th> is compulsory — you always need to write it.
• The end tag (</th>) is optional and can be omitted in below cases:
• If another <th> or <td> comes right after it.
• When there is no more data in its parent element.

Frequently Asked Questions (FAQ)