Open In App

HTML th Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The <th> tag in HTML is used to set the header cell of a table. The working of both tags (<th> and <td>) are the same, but the text properties are different. In <th> text is bold and centered, and in <td> text is regular and left aligned by default.

There are 2 types of cells in the HTML Table:

  • Header Cell: It is used to hold the header information.
  • Standard Cell: It is used to hold the body of data.

Syntax 

<th> Contents... </th>

Note: The <th> tag also supports the Global Attributes in HTML and Event Attributes in HTML.

Attributes

There are many attributes supported by HTML5 are listed below: 

Attributes

Descriptions

abbr

This attribute is used as an abbreviated version of the text content in a header cell.

colspan

Number of columns a header cell should span.

headers

Specifies one or more header cells a cell is related to.

rowspan

Set the number of rows a header cell should span.

scope

It is used to specify the score of header content.

There are many attributes supported by HTML4.1 but removed from HTML5 are listed below: 

Attributes

Descriptions

align

Set the alignment of the text content.

axis

Categories header cells.

bgcolor

Set the background color of a header cell.

char

Aligns the content in a header cell to a character.

charoff

It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes is in numeric form.

height

Set the height of a header cell.

valign

It is used to set the vertical alignment of text content.

width

It is used to set the width of a header cell

Example 1: In this example, we will see the implementation of <th> tag in html.

HTML




<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>th Tag</h2>
        <table>
            <thead>
                <tr>
                   
                    <!-- th tag starts here -->                
                    <th>Name</th>
                    <th>User Id</th>                
                    <!-- th tag end here -->
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Shashank</td>
                    <td>@shashankla</td>
                </tr>
                <tr>
                    <td>GeeksforGeeks</td>
                    <td>@geeks</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
 
</html>


Output: 

Example 2: In this example, we will see the implementation of <th> tag in html.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML th Tag Example</title>
    <style>
        body {
            text-align: center;
        }
 
        th,
        td {
            border: 1px solid #dddddd;
            padding: 8px;
        }
 
        table {
            margin: 10px auto;
        }
 
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
      GeeksforGeeks
      </h1>
    <h2>Sample Table with
          <code><th></code> Tag
      </h2>
 
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </table>
</body>
 
</html>


Output:

Screenshot-2023-12-15-151948

Supported Browsers

  • Google Chrome 15
  • Edge 12 and above
  • Firefox 1 and above
  • Opera 12.1 and above
  • Safari 1 and above


Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads