HTML <th> Tag

The <th> tag adds a table header cell to an HTML table. Each table header cell contains a title that describes the data in the cells below.

HTML Tag

Example

#

Two styled <th> tag.

First name Last name
Denice Hobermann
Paulo Cornell
<style>
  table.tb { width: 250px; border-collapse: collapse; }
  .tb th, .tb td { border: solid 1px #777; padding: 5px; }
  .tb th { background-color:lightblue; }
</style>

<table class="tb">
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Hobermann</td>
  </tr>
  <tr>
    <td>Paulo</td>
    <td>Cornell</td>
  </tr>
</table>
th = table header

Using <th>

The <th> tag defines an HTML table header cell.

By default, text in a header cell is bold and center aligned.

The <th> tag is a semantic tag and should only be used as a header to other data cells.

More Examples

A table with 3 <th> elements, of which 2 span a couple columns: Name and Location.

Name Email Location
Tim Hallman thall@aa.com Dallas USA
Jelle van Loenen jelle@loenen.org Arnhem Netherlands
Jose Lopez lopez@argtech.ph Manila Philippines
Jeroen Harmsma jharm@gmail.com The Hague Netherlands
Sunil Gupta sunil@traf.in Mumbai India
Henry Wong henry@google.com San Francisco USA
Cindy Velasquez cindy@alicante.mx Mexico City Mexico
<style>
 table.tbl { width:100%; border-collapse: collapse; }
 .tbl th, .tbl td { padding:3px; border: 1px solid #999; }
 .tbl th { background-color:lightblue; }
</style>

<table class="tbl">
  <tr>
    <th colspan="2">Name</th>
    <th>Email</th>
    <th colspan="2">Location</th>
  </tr>
  <tr>
    <td>Tim</td>
    <td>Hallman</td>
    <td>thall@aa.com</td>
    <td>Dallas</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jelle</td>
    <td>van Loenen</td>
    <td>jelle@loenen.org</td>
    <td>Arnhem</td>
    <td>Netherlands</td>
  </tr>
  <tr>
    <td>Jose</td>
    <td>Lopez</td>
    <td>lopez@argtech.ph</td>
    <td>Manila</td>
    <td>Philippines</td>
  </tr>
  <tr>
    <td>Jeroen</td>
    <td>Harmsma</td>
    <td>jharm@gmail.com</td>
    <td>The Hague</td>
    <td>Netherlands</td>
  </tr>
  <tr>
    <td>Sunil</td>
    <td>Gupta</td>
    <td>sunil@traf.in</td>
    <td>Mumbai</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Henry</td>
    <td>Wong</td>
    <td>henry@google.com</td>
    <td>San Francisco</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Cindy</td>
    <td>Velasquez</td>
    <td>cindy@alicante.mx</td>
    <td>Mexico City</td>
    <td>Mexico</td>
  </tr>
</table>

Tip: If you need a data cell to appear as a header cell, use CSS instead of <th>.
Don't use a <th> where a <td> should be used.


Attributes for <th>

This table lists the <th> tag attributes.

Attribute Value Description
colspan number Number of columns the header cell extends
rowspan number Number of rows the header cell extends
id    identifier Defines a unique identifier for the header cell.
class    classnames Sets one or more CSS classes to be applied to the header cell.
style    CSS-styles Sets the style for the header cell.
data-*    value Defines additional data that can be used by JavaScript.
title    text Sets a title that displays as a tooltip.
headers header-id Id of the header the specified cell is related to
scope col
colgroup
row
rowgroup
Specifies if the header cell is for a column, row, or group of columns or rows
sorted reversed
number
reversed number
number reversed
Sets the sorting direction of the header cell
abbr text Abbreviated version of the header cell text

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on thead in HTML5.

Attribute Description Alternative
align Aligns the content in the th element. CSS text-align
axis List of cell ids that cell header applies to. scope attribute
bgcolor Defines the background color for the th element. CSS background-color
char Aligns content to a character, for example "," or ".". CSS text-align
charoff Shifts column data to the right relative to char attribute. CSS text-align
height Sets the height of the th element. CSS height
valign Sets the vertical alignment of content in the th element. CSS vertical-align
width Sets the width of the th element. CSS width

Table Tags

The <th> tag is part of a group of tags that are used to create HTML tables. This group is referred to as the Table tag group. Together, these tags allow you to create comprehensive HTML tables.

Here is a list of table tags

Element Description
<table> Creates a table that contains elements listed below
<caption> Creates a caption above or under a table
<colgroup> Creates a container for col elements
<col> Creates a style for one or more columns in a table
<thead> Creates a table header that can style all header cells
<tbody> Creates a table body that can style all data cells
<tfoot> Creates table footer that can style all footer cells
<tr> Creates a table row that contains table cells
<th> Creates a table header cell
<td> Creates a table data cell

Browser support

Here is when <th> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides