what is the use of thead tag in html
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
ஃ structure diagram examples
ஃ Advantages of using <thead>tag
ஃ Explain Program
ஃ Output
what is the use of thead tag in html
✷ The <thead> tag in HTML is used to create the header section of a table.
✷ It is placed inside the <table> tag and usually appears above the <tbody> section.
✷ The main purpose of <thead> is to group the heading rows of a table, making the data easier to understand and well-organized.
✷ Inside the <thead> tag, we use the <tr> tag to create a row and <th> tags to define the column headings.
✷ These headings are automatically shown in bold and are usually center-aligned, which helps them stand out from the rest of the table data.
✷ Using <thead> is very helpful because it improves the structure and readability of the table.
✷ It also helps browsers and screen readers understand which part of the table contains headings, making your webpage more accessible and user-friendly.
- HTML tables are used to present data in rows and columns .
- <thead> tag is used to define the header section of an HTML table. it groups together row that contain column headings.
- <thead> tag is used to group the header row of table that define column titles.
- <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>
ஃ structure diagram examples
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
Related Post :-
Post a Comment