❮ Previous Next ❯

HTML <th> tag

The <th> defines a heading cell that contains the data of a table. It should be defined inside the <tr> element.

Display Type: Table-cell

Related elements of <th> tag:

<table>: It defines an HTML table.
<caption>: It defines an HTML table name.
<col>: It defines a column in an HTML table.
<colgroup>: It defines a group of columns within an HTML table.
<td>: It defines an HTML table cell (excluding heading cell).
<tr>: It defines an HTML table row.
<tbody>: It defines the group of main content of an HTML table.
<tfoot>: It defines the group of footer content of an HTML table.
<thead>: It defines the group of header content of an HTML table.

Example of <th> tag

 <tr>
  <th> Name </th>
  <th> Spend </th>
 </tr>

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<th>	Yes	Yes	Yes	Yes	Yes

Full code example

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>

 <tr>
  <th> Name </th>
  <th> Age </th>
 </tr>

 <tr>
  <td> Tom </td>
  <td> 30 </td>
 </tr>
 
 <tr>
  <td> John </td>
  <td> 32 </td>
 </tr>
 
</table>
</body>
</html>

Run The code »

Output on the browser

Name	Age
Tom	30
John	32

1. abbr attribute

The abbr tag was used in older HTML to define the short abbreviated description of the content in a header cell. This attribute has no visual effect on the ordinary web-browser but helps in screen-reader.
It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use <abbr> element to replace it.

Syntax

<th abbr="text">

Modern and valid example

<th>
 <abbr title="name"> Name </abbr>
</th>
<th>
 <abbr title="expenditure"> $200 </abbr>
</th>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
abbr	Yes	Yes	Yes	Yes	Yes

2. align attribute

The align attribute defines the horizontal alignment of the header cells content with respect to its cell. It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use CSS property - "text-align" to replace it.

Syntax

<th align="left | center | right | justify | char">

Its default value is left.

Attribute values

Value	Notes
left	It defines left alignment content. (Default value).
center	It defines center alignment content.
right	It defines right alignment content.
justify	It defines equal lines in length.
char	It defines content alignment to a specific character.

CSS replacement example

<th style="text-align: center;">

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
align	Yes	Yes	Yes	Yes	Yes

3. axis attribute

The axis attribute was used to define classified header cells for a specific purpose. It is not supported in HTML5. According to W3C, it contains a list of space-separated strings. It also helps in defining group-related columns.

Syntax

<th axis="category_name">

Example

<table>
<tr>
 <th axis="name"> First Name </th>
 <th axis="name"> Last Name </th>
 <th axis="age"> Age </th>
</tr>

<tr>
 <td axis="name"> Tom </td>
 <td axis="name"> Cruise </td>
 <td axis="age"> 23 </td>
</tr>
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
axis	Yes	Yes	Yes	Yes	Yes

4. bgcolor attribute

The bgcolor attribute defines the background-color of a header cell. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "background-color" to replace it.

Syntax

<th bgcolor="color_name | hex_number | rgb_number">

Attribute values

Value	Notes
color_name	It defines the background-color with a color name like red, green etc.
hex_number	It defines the background color with a hex code (like "#ff0700").
rgb_number	It defines the background color with a rgb code (like "rgb(255,255,255)").

CSS replacement example

<th style="background-color: grey;">
 or
<th style="background-color: #808080;">
 or
<th style="background-color: rgb(128, 128, 128);">

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
bgcolor	Yes	Yes	Yes	Yes	Yes

5. char attribute

The char attribute defines the alignment of the content to a character in a header cell. This attribute is valid only when the align attribute is set to char value. It is not supported in HTML5. Use CSS property instead - "text-align" like
<th style = "text-align: right;">

Syntax

<th align="char" char="character">

Example (obsolete)

  <tr>
   <th align="char" char="N"> First Name </th>
   <th align="char" char="N"> Last Name </th>
  </tr>

Numbers will align at the letter, N.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
char	No	No	No	No	No

6. charoff attribute

The charoff attribute defines the horizontal distance (mostly prefer in the number of pixels) of the alignment character specified by the char attribute. This attribute is valid only when the align attribute. It is not supported in HTML5. Use CSS property instead - "text-align" like
<th style = "text-align: right">

Basic syntax

<th align="char" char="." charoff="20">

In the above syntax, align="char" enables alignment based on the character.
char="." defines the characters are aligned based on the decimal (.).
charoff="12" means the decimal (.) is positioned 12 pixel from the left edge of the column.

Attribute values

Attribute values can be either negative or positive.

Value	Note
positive number	It defines the numbers of pixels positioned from the left of the column.
negative number	It defines the numbers of pixels positioned from the right of the column.

Example (obsolete)

<tr>
 <th align="char" char="N" charoff="20"> Fist Name </th>
 <th align="char" char="N" charoff="20"> Last Name </th>
</tr>

The above example means that the two words are aligned based on the letter (N) and the letter (N) is positioned 12 pixels from the left side of the column.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
charoff	No	No	No	No	No

Decimal alignment using CSS

<style>
 th {
  text-align:right;
  font-variant-numeric:tabular-nums;
 }
</style>

7. colspan attribute

The colspan attribute defines the number of columns that a header cell should extend. Its default value is 1. Setting its value greater than 1000 is invalid.

Basic syntax

<th colspan="number">

Example

<table>
 <tr>
  <th colspan="3">Heading Name</th>
 </tr>
 <tr>
  <td> Col 1 </td>
  <td> Col 2 </td>
  <td> Col 3 </td>
 </tr>
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
colspan	Yes	Yes	Yes	Yes	Yes

8. headers attribute

The headers attribute is used in a <td> cell to associate it with one or more <th> header cells (Complex table). It is mostly used with scope attribute to provide the complex HTML table.
Each value corresponds with the value of the id attribute of the <th> element. Note that this attribute has no visual effect on the ordinary web-browsers but helps in screen readers.

The below example is a data of a salesman (Tom) selling a product in 1 year dividing to two sections (1-6 months and 7-12 months).

<table style="width:90%; margin:20px auto; border-collapse:collapse; text-align:center;">
  
  <tr>
    <th id="salesman">Salesman</th>
    <th id="year2025" colspan="2"> 2025 </th>
  </tr>
  
  <tr>
    <th></th>
    <th id="m1">1-6 months</th>
    <th id="m2">7-12 months</th>
  </tr>
  
  <tr>
    <th id="tom">Tom</th>
    <td headers="tom year2025 m1">
      $130
    </td>
    <td headers="tom year2025 m2">
      $150
    </td>
  </tr>
  
</table>

Output on the browser

Salesperson	2025
Salesperson	m1	m2
Tom	$130	$150

For this cell: <td headers="tom year2025 m1"> $130 </td>
It connects to
tom - Row header
year2025 - Main column group
m1 - Months number
The screen readers will read:
Tom – 2025 – m1 – $130

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
headers	Yes	Yes	Yes	Yes	Yes

9. height attribute

The height attribute defines the height of the header cell either in pixel or %. A header cell occupies the space that requires to display the content. It is not supported in HTML5. Use CSS property instead - "height" like
<th style = "height: 100px;">

Attribute values

Value	Note
pixels	It defines the height of the cell in pixels.
%	It defines the height of the header cell in % within the current <tr> container.

Syntax

<th height="pixels | %">

CSS Replacement example

<tr>
 <th style="height:200px;"> Name </th>
 <th style="height:200px;"> Age </th>
</tr>

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
height	Yes	Yes	Yes	Yes	Yes

9. nowrap attribute

The nowrap attribute defines the content inside a header cell to prevent from wrapping to multiple lines. It is not supported in HTML5. Use CSS property instead - "white-space" like
<th style = "white-space: nowrap;">

Syntax

<th nowrap>

CSS Replacement example

<tr>
 <th> Name </th>
 <th style="white-space:nowrap;"> Monthly expentiture in the year 2017 </th>
</tr>

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
nowrap	Yes	Yes	Yes	Yes	Yes

10. rowspan attribute

The rowspan attribute defines the number of rows that a header cell should extend. Its default value is 1. If 0 is set, it extends until the end of the table section.

Basic syntax

<th rowspan="number">

Full code example

<table>

<tr>
    <th> Name </th>
    <th> Spend </th>
    <th rowspan="3"> Total: $230 </td>
  </tr>

  <tr>
    <td> Tom </td>
    <td> $130 </td>
  </tr>

  <tr>
    <td> John </td>
    <td> $100 </td>
  </tr>

</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
rowspan	Yes	Yes	Yes	Yes	Yes

11. scope attribute

The scope attribute defines the header of a cell (within the <th>) is related either with rows or columns or group of columns or group of rows. It helps screen readers understand table structure.

Basic syntax

<th scope="row | column | rowgroup | colgroup">

Value	Note
row	Header applies to the entire column.
col	Header applies to the entire row.
rowgroup	Header applies to a group of rows.
colgroup	Header applies to a group of columns.

Example (scope="col")

<table border="1">

  <tr>
    <th scope="col">Name</th>
    <th scope="col">Amount</th>
  </tr>
    
  <tr>
    <td>Tom</td>
    <td>$130</td>
  </tr>

</table>

“Name” applies to all cells below it.
“Amount” applies to its column.

Example (scope="row")

<table border="1">

  <tr> 
    <th scope="row">Tom</th>
    <td>$130</td>
  </tr>

  <tr>
    <th scope="row">John</th>
    <td>$100</td>
  </tr>

</table>

“Tom” describes the row.
“John” describes the row.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
scope	Yes	Yes	Yes	Yes	Yes

12. valign attribute

The valign attribute defines the vertical alignment of a header cell content in the table. It was used in older HTML to align the content of a header cell which is now replaced by CSS.

Syntax

<th valign="top | middle | bottom | baseline">

Value	Note
top	It puts the text to the top of the cell as much as it can.
middle	It puts the text to the center of the cell. It preserves both horizontal and vertical alignment.
bottom	It puts the text to the bottom of the cell as much as it can.
baseline	It also puts the text to the bottom of the cell but mainly align to the baseline of the characters.

Top	Bottom
Middle	Baseline

You will notice the difference between baseline and other valign attribute's values when the font-sizes are of different size.

With top value, Demo

With bottom value, Demo

With middle value, Demo

With baseline value, Demo

Always remember valign attribute only preserves vertical alignment. For horizontal alignment use the CSS property- text-align.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
valign	Yes	Yes	Yes	Yes	Yes

Column align using CSS (modern and valid)

CSS property - vertical-align can replace the use of valign attribute.

<tr style="height:80px;">
 <th style="vertical-align:top;">
      Top
 </th>
 <th style="vertical-align:bottom;">
      Bottom
 </th>
 <th style="vertical-align:middle;">
      Middle
 </th>
 <th style="vertical-align:baseline;">
      Baseline
 </th>
</tr>

Example of making similar alignment (say middle) of all the header cells content within the <table> element.

<style>
 th {
 vertical-align:center;
 }
</style>

12. width attribute

The width attribute defines the width of a header cell either in pixel or %. A header cell occupies the space that requires to display the content. It is not supported in HTML5. Use CSS property instead - "width" like
<th style = "width: 300px;">

Attribute values

Value	Note
pixels	It defines the width of the header cell in pixels.
%	It defines the width of the header cell in % within the current <tr> container.

Syntax

<th width="pixels | % ">

CSS Replacement example

<tr>
 <th style="width:300px;"> Name </th>
 <th style="width:300px;"> Age </th>
</tr>

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
width	Yes	Yes	Yes	Yes	Yes

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML <th> tag

Related elements of <th> tag:

Example of <th> tag

Supported Browsers

Full code example

Attributes of <th> tag

1. abbr attribute

Supported Browsers

2. align attribute

Supported Browsers

3. axis attribute

Supported Browsers

4. bgcolor attribute

Supported Browsers

5. char attribute

Supported Browsers

6. charoff attribute

Attribute values

Supported Browsers

Decimal alignment using CSS

7. colspan attribute

Supported Browsers

8. headers attribute

9. height attribute

9. nowrap attribute

10. rowspan attribute

Supported Browsers

11. scope attribute

Supported Browsers

12. valign attribute

Supported Browsers

Column align using CSS (modern and valid)

12. width attribute