Differentiate between <th> & <thead> tags in HTML Table
Last Updated :
01 Feb, 2022
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. |
Similar Reads
Non-linear Components In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
Spring Boot Tutorial Spring Boot is a Java framework that makes it easier to create and run Java applications. It simplifies the configuration and setup process, allowing developers to focus more on writing code for their applications. This Spring Boot Tutorial is a comprehensive guide that covers both basic and advance
10 min read
HTML Tutorial HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
11 min read
Class Diagram | Unified Modeling Language (UML) A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a project—like developers and designers—understand how the system is organized and how its components interact
12 min read
Steady State Response In this article, we are going to discuss the steady-state response. We will see what is steady state response in Time domain analysis. We will then discuss some of the standard test signals used in finding the response of a response. We also discuss the first-order response for different signals. We
9 min read
Backpropagation in Neural Network Back Propagation is also known as "Backward Propagation of Errors" is a method used to train neural network . Its goal is to reduce the difference between the model’s predicted output and the actual output by adjusting the weights and biases in the network.It works iteratively to adjust weights and
9 min read
Polymorphism in Java Polymorphism in Java is one of the core concepts in object-oriented programming (OOP) that allows objects to behave differently based on their specific class type. The word polymorphism means having many forms, and it comes from the Greek words poly (many) and morph (forms), this means one entity ca
7 min read
3-Phase Inverter An inverter is a fundamental electrical device designed primarily for the conversion of direct current into alternating current . This versatile device , also known as a variable frequency drive , plays a vital role in a wide range of applications , including variable frequency drives and high power
13 min read
What is Vacuum Circuit Breaker? A vacuum circuit breaker is a type of breaker that utilizes a vacuum as the medium to extinguish electrical arcs. Within this circuit breaker, there is a vacuum interrupter that houses the stationary and mobile contacts in a permanently sealed enclosure. When the contacts are separated in a high vac
13 min read
AVL Tree Data Structure An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. The absolute difference between the heights of the left subtree and the right subtree for any node is known as the balance factor of
4 min read