Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a header cell in a table using HTML5
Overview
A cell in a table is a convergence of two things, a row and a column. The header is the top row of the table whose columns contain a category name of what category the data will be in below cells. So as in this problem we are going to create a cell for header of a table, so for header cell the convergence of the table row that is “<tr>” and convergence of table header column that is “<th>” will create a header cell for a table in HTML5.
Syntax
The syntax to create header cell in a table −
<tr> <th></th> <th></th> </tr>
<tr> − Represents table row.
<th> − Represents table head as table column.
Algorithm
Step 1 − Create a HTML boilerplate code in your favorite editor.
Step 2 − Now use the HTML <table> tag to create a table and inside the table tag define the head and body section of the table using <thead> and <tbody> respectively. To create the header cells it is not necessary to inherit the <thead> tag to the table. But to separate the header and body, to provide more functionality during working on the browser we should inherit the <thead> tag to the table.
<table> <thead> </thead> <tbody> </tbody> </table>
Step 3 − Start creating a cell for the header section using <tr> tag then inherit the <th> tag in it.
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
Step 4 − Table header cells are created successfully. Now if necessary insert the data into the table body section and output will be displayed on your browser.
Example
In the given example, we have created a table to store the records of the employee. In this the header cells are created using the above given syntaxes. As the header of the table contains the <th> tag so, the <th> tag has it pre built property which enhances the view of the text written inside the head tag of the table. The <th> tag in header cells of the table gives a bolder look to the text. Also in the normal table body text the data inside the <td> tag is not aligned center but in the header cells of the table we do not have to style the cells for centering the text.
<html>
<head>
<title>Creating a Header Cell</title>
</head>
<body>
<table border="" align="center" style="text-align: center;">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Profile</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>Developer</td>
<td>$500</td>
</tr>
<tr>
<td>2</td>
<td>Samuel</td>
<td>Network Eng.</td>
<td>$600</td>
</tr>
</tbody>
</table>
</body>
</html>
The given below image shows the output of the above example in which we had created the table cells for the “Employee Records” table. The highlighted part shows the four header cells created as Employee’s ( S No., Name, Profile and Salary ).
Conclusion
The table above created is a collection of cells in which the data is inserted. As the header, the body of the table also contains the group of cells. The only difference is that the header cells are created by the convergence of “<tr>” and “<th>”, and the body cells are created by the convergence of “<tr>” and “<td>”, here “<td>” represents the table data of <tbody> section. The header cells are created inside the <thead> tag as on migrating the table to the database it automatically makes the column for the table of the database.
181 Views
