ad

Thursday, December 4, 2025

what is the use of thead tag in html

what is the use of thead tag in html

web designing theory

This Blog You Will Learn 

  ஃ what is the use of thead tag in html

 ஃ Why use the <thead> tag

 ஃ How the <thead> tag works

 ஃ Syntax  thead tag

 ஃ Advantages of using <thead>tag

 ஃ Explain Program

 ஃ Output

what is the use of thead tag in html

  1. HTML tables are used to present data in rows and columns .
  2.  
  3. <thead> tag is used to define the header section of an HTML table. it groups  together row that contain column headings.
  4.  <thead> tag is used to group the header row of table that define column titles.
  5. <thead> tag is semantic tag.

 Why use the <thead> tag

✅Separates table headers form table data.
✅ enhances table readability
✅aids screen readers in comprehending table structure
✅simplifies css styling 
✅ create clean and professional tables 

 How the <thead> tag works

 ✔  <table>  - main container
✔  <thead>  - header section 
✔<tr>        - row
✔<th>       - header cell
✔ <td>       - data cell
✔<thead>  - table header
✔ <tbody> - main table content
✔<tfoot>   - table footer or summary
✔<thead>  appears at the top of the table
✔contains only header rows
✔ Browsers recognize it as table heading content.
✔ work together with <tbody> and <tfoot>

Advantages of using <thead>tag

  • Easy CSS style
  •  Better table structure
  • improved accessibility 
  • create fixed headers

Syntax  thead tag

   
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
</table>

what is the use of thead tag in html

Example



<!doctype html>
  <html>
  <head>
     
     <title> HTML Input Type Datetime </title>

      </head>
    <body>
        <center>
    <h1> webdesigningtheory.blogspot.com</h1>
 
    <h2> learn HTML thead tag</h2>
    <table>

        <!-- thead tag starts -->
         <thead>
             <tr>
            <th>Student Name</th>
            <th> Roll No </th>
             </tr>
         </thead>
         <!-- thead tag ends -->
          <tbody>
            <tr>
                <td>Seeta</td>
                <td> 01</td>
            </tr>
            <tr>
                <td>radha</td>
                <td>02</td>
            </tr>
            <tr>
                <td>parvati</td>
                <td>03</td>
            </tr>
            <tr>
                <td>sarasvati</td>
                <td>04</td>
            </tr>
            <tr>
                <td>tulja</td>
                <td>05</td>
            </tr>
          </tbody>
     </table>
     </center>
    </body>
    </html>


what is the use of thead tag in html

Explain Program

Step  1] 

<!DOCTYPE html>

This declare the document type.

browser that the document is written in html

Step 2 ]

<html>.... . </html>

html is the root element of the html page.

 Every thing inside it is part of the webpage.

Step 3]

<head>
     
  <title> HTML Input Type Datetime </title>

    </head>

  <head>  section 

  head section contains metadata about page. not visible on the page itself.

 <title> tag

 title section set the title of the page shows the browser tab.

Step 4]

<body><center>

< body> tag  contains all the content visible to webpage.

<body> tag contains  all the visible content of the page.

inside <body> show the browser screen.

<center>  all the content center

Step 5]


<h1> webdesigningtheory.blogspot.com</h1>
 
    <h2> learn HTML thead tag</h2>

<h1> tag heading of page.

<h2> tag subheading  of page.

Step 6]

  <table>

<table> tag  creates structured data in row and columns.

Step 7]

<thead>
             <tr>
            <th>Student Name</th>
            <th> Roll No </th>
             </tr>
         </thead>

  <thead> tag  :- defines the header section  of the table.

  <tr> tag  :-  Row the table.

  <th> tag :- header cells.

   Student Name and Roll No  show column headers.

Step 8]


</thead>
         <!-- thead tag ends -->
          <tbody>
            <tr>
                <td>Seeta</td>
                <td> 01</td>
            </tr>
            <tr>
                <td>radha</td>
                <td>02</td>
            </tr>
            <tr>
                <td>parvati</td>
                <td>03</td>
            </tr>
            <tr>
                <td>sarasvati</td>
                <td>04</td>
            </tr>
            <tr>
                <td>tulja</td>
                <td>05</td>
            </tr>
          </tbody>


<tbody> tag :- contains the main data of table.

<tr> tag :-  row of student data.

<td> tag :- table cell containing student name or roll number.

Step 9]

   Closing tag  

   
     </table>
     </center>
    </body>
    </html>


what is the use of thead tag in html

Output

what is the use of thead tag in html








Related Post :-

how to use the address tag in html

how to abbr tag in HTML

how to use anchor tag in html

Labels: ,