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.
Two styled <th> tags.
| 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
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.
A table with 3 <th> elements, of which 2 span a couple columns: Name and Location.
| Name | 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.
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 |
| abbr | text | Abbreviated version of the header cell text |
For additional global attributes see our global attributes list.
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. | <th> 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 |
sorted |
Sets the sorting direction of the header cell | Use JavaScript |
valign |
Sets the vertical alignment of content in the th element. | CSS vertical-align |
width |
Sets the width of the th element. | CSS width |
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, they 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 |
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 |
