HTML th Tag

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:

Supported Browsers

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

Article Tags :

HTML

Web Technologies

HTML-Tags