Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create table header in HTML?
To create table headers in HTML, use the <th> tag. Table headers are placed within table rows <tr> and define column or row headings. The <th> element automatically displays text in bold and center-aligned by default, making it visually distinct from regular table data cells.
Table headers serve multiple purposes − they provide semantic meaning for screen readers, can be styled differently with CSS, and help organize data in a structured format. Headers can be placed at the top of columns, beginning of rows, or both depending on your table structure.
Syntax
Following is the syntax to create table headers in HTML −
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
The <th> tag can also include attributes like colspan and rowspan to span multiple columns or rows, and scope to specify whether the header applies to columns, rows, or groups.
Basic Table Header Example
Following example demonstrates creating a simple table with column headers −
<!DOCTYPE html>
<html>
<head>
<title>Basic Table Headers</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Student Information</h2>
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Grade</th>
</tr>
<tr>
<td>Jason</td>
<td>101</td>
<td>A</td>
</tr>
<tr>
<td>Sarah</td>
<td>102</td>
<td>B+</td>
</tr>
</table>
</body>
</html>
The output displays a table with bold, centered headers −
Student Information Name Roll No Grade Jason 101 A Sarah 102 B+
Multiple Column Headers
Following example shows a table with multiple column headers for employee data −
<!DOCTYPE html>
<html>
<head>
<title>Employee Table Headers</title>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
td {
padding: 8px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Database</h2>
<table>
<tr>
<th>Employee Name</th>
<th>Employee ID</th>
<th>Email</th>
<th>Department</th>
<th>Mobile Number</th>
</tr>
<tr>
<td>Jason</td>
<td>28</td>
<td>jason@gmail.com</td>
<td>Content Developer</td>
<td>7674897385</td>
</tr>
<tr>
<td>Alice</td>
<td>29</td>
<td>alice@gmail.com</td>
<td>Web Designer</td>
<td>9876543210</td>
</tr>
</table>
</body>
</html>
The output shows a structured employee table with highlighted headers −
Employee Database Employee Name | Employee ID | Email | Department | Mobile Number Jason | 28 | jason@gmail.com | Content Developer | 7674897385 Alice | 29 | alice@gmail.com | Web Designer | 9876543210
Row and Column Headers
Following example demonstrates using headers for both rows and columns in a schedule table −
<!DOCTYPE html>
<html>
<head>
<title>Schedule Table with Headers</title>
<style>
table, th, td {
border: 1px solid green;
border-collapse: collapse;
}
th {
background-color: #e8f5e8;
padding: 8px;
font-weight: bold;
text-align: center;
}
td {
padding: 6px;
text-align: center;
}
caption {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Weekly Schedule</h2>
<table>
<caption>Employee Login Times</caption>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>Nikhil</th>
<td>9:00 AM</td>
<td>9:10 AM</td>
<td>9:05 AM</td>
<td>10:00 AM</td>
<td>9:30 AM</td>
</tr>
<tr>
<th>Prudhvi</th>
<td>9:10 AM</td>
<td>9:00 AM</td>
<td>9:05 AM</td>
<td>10:20 AM</td>
<td>9:30 AM</td>
</tr>
<tr>
<th>Krishna</th>
<td>Leave</td>
<td>Leave</td>
<td>Leave</td>
<td>Leave</td>
<td>10:30 AM</td>
</tr>
</table>
</body>
</html>
This example shows both column headers (days of week) and row headers (employee names), creating a comprehensive schedule grid −
Weekly Schedule
Employee Login Times
Monday Tuesday Wednesday Thursday Friday
Nikhil 9:00 AM 9:10 AM 9:05 AM 10:00 AM 9:30 AM
Prudhvi 9:10 AM 9:00 AM 9:05 AM 10:20 AM 9:30 AM
Krishna Leave Leave Leave Leave 10:30 AM
Styling Table Headers
Table headers can be customized with CSS to improve visual appearance. The <th> element supports all standard CSS properties including background colors, fonts, borders, and spacing.
Example − Styled Headers
<!DOCTYPE html>
<html>
<head>
<title>Styled Table Headers</title>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 600px;
}
th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px;
text-align: left;
border: none;
font-size: 14px;
}
td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
< 
9K+ Views
