HTML - <th> Tag

HTML <th> tag designates the header cell for HTML tables. It needs to be used as a child element of <tr>, which is itself stated in the <table> tag.

The <td> tag is utilised to define a standard data cell. Although the browser presents the header cell as bold and centred by default, you can modify this behaviour using CSS properties. The <th> tag can contain any HTML element that can be used in the HTML document's body including text, images, forms, links, and more. Depending on the size of its contents, the table's size is automatically modified.

Syntax

<th>
   ....
</th>

Attribute

HTML th tag supports Global and Event attributes of HTML. Accepted some specific attributes as well which are listed bellow.

Attribute	Value	Description
abbr	text	Specifies an abbreviated of the content in a header cell
colspan	number	Specifies the number of columns.
headers	header_id	Specifies one or more header cells a cell is realted to.
rowspan	number	Specifies the number of rows a cell should take.
scope	col colgroup row rowgroup	Specifies whether a header cell is a header for a column, row, or group of columns or rows.

Examples of HTML th Tag

Bellow examples will illustrate the usage of th tag. Where, when and how to use th tag.

Creating Two Header Cells

Let's consider the following example, where we are going to create the table using the two header cells.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #D2B4DE;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>23</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Ram</td>
         <td>21</td>
      </tr>
   </table>
</body>
</html>

Adding Background Color on Header Cells

Considering another scenario where we are going to apply thw background-color to the header cells.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #5B2C6F;
      }
   </style>
<body>
   <table>
      <tr>
         <th style="background-color:#D6EAF8 ">Students</th>
         <th style="background-color:#D5F5E3">Marks</th>
      </tr>
      <tr>
         <td>Akhil</td>
         <td>95</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>96</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>99</td>
      </tr>
   </table>
</body>
</html>

Aligning Header Cell Content

In the following example, we are going to align the <th> to the right using the CSS.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th style="text-align:right">Car</th>
         <th style="text-align:right">Model</th>
      </tr>
      <tr>
         <td>RS7</td>
         <td>2023</td>
      </tr>
      <tr>
         <td>AUDI</td>
         <td>2017</td>
      </tr>
      <tr>
         <td>BENZ</td>
         <td>2014</td>
      </tr>
   </table>
</body>
</html>

Setting Width of Header Cell

Following is an example where we are going to set the width of the <th> tag using CSS.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #BB8FCE;
      }
   </style>
<body>
   <table style="width:50%">
      <tr>
         <th style="width:25%">Name</th>
         <th style="width:25%">Countrty</th>
      </tr>
      <tr>
         <td>Ram</td>
         <td>India</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Greece</td>
      </tr>
      <tr>
         <td>Mamboo</td>
         <td>Nigeria</td>
      </tr>
   </table>
</body>
</html>

Supported Browsers

Tag
th	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm