Open In App

Differentiate between <th> & <thead> tags in HTML Table

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll be differentiating the <th> tag and <thead> tag used in HTML. Before going forward, we must know that both the tags are used to give the headers in the HTML tables. <th> tag is used to give header in the cell of a table in HTML whereas <thead> tag is used to give the header of a group of a table.

Note: Both the tags can’t be replaced with each other and you will also not see any changes to the outputs, because the difference can only be understood by the developers or by the browsers.

HTML <th> tag: This tag defines the heading for a table cell. The header of the cell in a table is always aligned centered by default and is bold so that anyone can easily find the header of a column. It is directly related to every <td> tag. Basically, a table in HTML consists of two cells i.e., header cells and data cells.

Syntax: In the given syntax, the 3 columns i.e, S.No, Book, and Author are the headers of the cell table.

<tr>
    <th>S.No</th>
    <th>Name</th>
    <th>Roll NO</th>
</tr>

Attributes:

  • abb: specify the abbreviation of <th> tag.
  • colspan: defines no. of columns span by a column.
  • scope: specify the scope of the cells of the header.
  • rowspan: defines no. of rows span by a column.

Example: The example given below demonstrates the execution of <th> tag

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>The th tag</h2>
  
    <table>
        <tr>
            <th>S.No</th>
            <th>Book</th>
            <th>Author</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Intro to C++</td>
            <td>E Bala.</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Programming Fundamentals</td>
            <td>GFG</td>
        </tr>
    </table>
</body>
  
</html>


Output:

HTML <thead> tag: This tag helps the browser/ search engine to find that which part of the body of the table is the header. This tag works with <tbody> and <tfoot>. For using this tag in the tables, there must be one <tr> tag that should be present inside in <thead>. This tag also works well when there is a need to print a bigger table that containers various pages because it helps in enabling the header and footer of the table to be printed at the top and bottom of the page.

Syntax:

<thead>
    <tr>
        <th>S.No</th>
        <th>Book</th>
        <th>Author</th>
    </tr>
</thead>

Attributes:

  • align: specifies the alignment of a text in an HTML page.
  • valign: specifies the vertical alignment of an HTML text.
  • char: set the alignment of content inside the <thead> element to a character.

Example: The example given below demonstrates the execution of the <thead> tag

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>The thead tag</h2>
  
    <table>
        <!DOCTYPE html>
        <html>
  
        <head>
            <title>Page Title</title>
        </head>
  
        <body>
            <h1>GeeksforGeeks</h1>
            <h2>The thead tag</h2>
  
            <table>
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Book</th>
                        <th>Author</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Intro to C++</td>
                        <td>E Bala.</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>2</td>
                        <td>Programming Fundamentals</td>
                        <td>GFG</td>
                    </tr>
                </tfoot>
            </table>
        </body>
  
        </html>
        <thead>
            <tr>
                <th>S.No</th>
                <th>Book</th>
                <th>Author</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Intro to C++</td>
                <td>E Bala.</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>2</td>
                <td>Programming Fundamentals</td>
                <td>GFG</td>
            </tr>
        </tfoot>
    </table>
</body>
  
</html>


Output:

Difference between <th> and<thead> tags:

<th>

<thead>

It is a type of inline-block element. It is a type of block-level element.
It enables the users to render header and data cells distinctly. It enables the user to support independent scrolling of the head and foot of a table.
It defines the header of the cell. It defines the header of a group table.
The header is visible to the users in bold. The header isn’t visible to the users.
It is a column header. It is a table header.
The output can be seen in the table itself. The output is not seen by the users but only works for the browsers.
It affects the layout of the table. It does not affect the layout.
It specifies the vertical headers at the beginning or at end of every row. It specifies the horizontal header with full width. 


Last Updated : 01 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads