HTML th Table Header Tag Tutorial with Examples


HTML provides table structure which consists of rows, columns or cells. During the creation of the table, multiple tags are used. <th> is a tag used to create a table header. A table header is a label that is put to the first row in order to explain the row or column data. <th> tag is an essential HTML tag that is supported by all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, Microsoft Edge, etc.

Header Cell vs Standard Cell

Tables are used to provide tabular data in a readable and elegant way. The table consists of multiple cells that are mostly used to store given data which is number, text even image. But in order to show these data and provide information about the cells, rows, and columns table header cell is used.

Table Header Cells

Create A Table with Table Headers

In order to create a table header, we will use the <th> tag. Table header tags are put as the first block of the <table>. In the following example, we will create two table headers named Month and Customer .

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th>Month</th>
<th>Customer</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
</tr>
</table>

</body>
</html>
Create A Table with Table Headers

<th> Table Header Attributes

<th> table header provides some attributes which are listed below. But with the HTML5 most of these attributes became absolute. But they can be used currently without a problem for most of the browsers but feature use is inconsistent.

AttributeValueDescription
abbrtextSpecifies an abbreviated version of the content in a header cell
alignleft
right
center
justify
char
Not supported in HTML5.
Aligns the content in a header cell
axiscategory_nameNot supported in HTML5.
Categorizes header cells
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Not supported in HTML5.
Specifies the background color of a header cell
charcharacterNot supported in HTML5.
Aligns the content in a header cell to a character
charoffnumber Not supported in HTML5.
Sets the number of characters the content will be aligned from the character specified by the char attribute
colspannumberSpecifies the number of columns a header cell should span
headersheader_idSpecifies one or more header cells a cell is related to
heightpixels
%
Not supported in HTML5.
Sets the height of a header cell
nowrapnowrapNot supported in HTML5.
Specifies that the content inside a header cell should not wrap
rowspannumberSpecifies the number of rows a header cell should span
scopecol
colgroup
row
rowgroup
Specifies whether a header cell is a header for a column, row, or group of columns or rows
valigntop
middle
bottom
baseline
Not supported in HTML5.
Vertical aligns the content in a header cell
widthpixels
%
Not supported in HTML5.
Specifies the width of a header cell
<th> Table Header Attributes

Set <th> Table Header Style with CSS

We can use CSS properties in order to change the style of the <th> table header. We can CSS properties for styling like background color, text size, etc. for the table header. In the following example, we will use the inline CSS style attribute in order to set the table header background yellow.

<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }

</style>
</head>
<body>

  <h1>The table header example</h1>

    <table>
      <tr>
        <th style="background-color: yellow">Month</th>
        <th style="background-color: yellow">Customer</th>
      </tr>
      <tr>
        <td>January</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>February</td>
        <td>1200</td>
      </tr>
    </table>

</body>
</html>

Alternatively we can use <style> tag to put some CSS styling to the <th> table header like below.

<style>
th {
background-color: yellow;
}
</style>

Align <th> Table Header Content

Table header contents can be aligned in different directions. align attribute is used to align the table header content and left , center ,right , justify and char can be used as an alignment direction. But keep in mind that align attribute it obsolete with HTML5.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th align="right">Month</th>
<th align="center">Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
</tr>
</table>

</body>
</html>
Align <th> Table Header Content

Set Background Color of <th> Table Header

The background color of the table header can be set by using attribute bgcolor. We can also use CSS properties to set the background color which is explained above. The attribute bgcolor value can be name of the color or the hexadecimal presentation of the RGB code.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th bgcolor="blue">Month</th>
<th bgcolor="yellow">Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
</tr>
</table>

</body>
</html>
Set Background Color of <th> Table Header

Extend or Spawn <th> Table Header To Multiple Columns

We can span or extend a single table header into multiple columns by using attribute colspan. We will provide the number of the columns we want to span. In the following example, we will span 2 columns where both will be put under the Customer table header.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}

</style>
</head>
<body>

<h1>The table header example</h1>

<table>
<tr>
<th>Month</th>
<th colspan=2>Customer</th>
</tr>
<tr>
<td>January</td>
<td>100000000</td>
<td>200000000</td>
</tr>
<tr>
<td>February</td>
<td>1200000000</td>
<td>2200000000</td>
</tr>
</table>

</body>
</html>
Extend or Spawn <th> Table Header To Multiple Columns

Set Width of <th> Table Header

By default, the table header width will be set according to other cells in the same row. But you can set the table header explicitly width by using attribute width. In the following example, we will set the table header width to 500px.

<html>
   <head>
      <style>
         table, th, td {
         border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h1>The table header example</h1>
      <table>
         <tr>
            <th>Month</th>
            <th width=500>Customer</th>
         </tr>
         <tr>
            <td>January</td>
            <td>100000000</td>
         </tr>
         <tr>
            <td>February</td>
            <td>1200000000</td>
         </tr>
      </table>
   </body>
</html>
Set Width of <th> Table Header

LEARN MORE  How To Create a Database and Table In MySQL and MariaDB?

Leave a Comment