In this section, we will learn what HTML <th> element is and how to use it.

HTML Table Header: What is <th> Tag in HTML?

The typical tables we see here and there are usually divided into three sections:

• The header: this is the part where there’s one row with a couple of cells and the content in each of those cells describes what that column is for!
• The body: this is the part where we put the actual data for each column.
• The footer: most of the times this is the last row in a table where we sum up and basically put the result in the cells of the footer.

Now, for the first part, the header, this is where we use HTML <th> element.

A <th> element stands for Table Header and is used to create a header cell.

The content we put as the value of this element is usually rendered in bold face.

For example, if we have a table and want to create 3 header cells for it, we need to use the <th> element three times.

Notes:

• The <th> element is just used to create a header cell, but the header itself is another row in a table, after all, so we use HTML <tr> element to group a bunch of <th> elements in a table. Also, to separate the header row from the rest of a table, we put that header row in another HTML element called <thead> which stands for table header.
• Sometimes content of the first column in a table is as important as the header cells and we want them to be in bold face as well. This is where we can use the <th> element for those cells, too! But in such cases, in order to differentiate between the use of <th> in the header and in the body of that table, the <th> element has an attribute called “scope” with which we can tell if the <th> element is used in the body or in the header of a table.

HTML <th> Tag Syntax:

<th> value </th>

HTML <th> Tag Values

As mentioned before, HTML <th> element represents a header cell in a table. So the value we put in the body of a <th> is considered the value that we want it to appear on a header cell of a table.

Basically, in a table, any cell that is considered as the head of that row or column and wants it to be appeared that way for users, we can use the <th> element for it.

Example: using <th> tag in HTML

See the Pen using <th> tag in HTML by Omid Dehghan (@odehghan) on CodePen.

In this example, we’ve used the <th> element 4 times to create four cells for the table.

Also, as you can see, the content of each header cell is rendered in bold face.

HTML <th> Tag Attributes

In the list below, you can see the list of attributes that can be used in the <th> element:

Name	Description
abbr	This attribute specifies the abbreviated version of the content we set in the header cell.
colspan	This attribute specifies the number of columns this header cell should span on.
headers	This attribute specifies one or more header cells that this cell is related to.
rowspan	This attribute specifies the number of rows the target header cell should span on.
scope	This attribute specifies whether the target header cell is a header of a column or row or even a group of columns or rows