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 set horizontal header for a table?
Tables in HTML can have horizontal headers and vertical headers. A horizontal header displays column labels across the top of the table, while a vertical header displays row labels down the left side. For horizontal headers, we place all <th> elements inside the first <tr> tag of the table.
Syntax
Following is the syntax to set horizontal headers for a table −
<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> elements in the first row create horizontal headers that span across the top of the table columns.
Basic Horizontal Header Example
Following example demonstrates how to create a simple table with horizontal headers −
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Table Headers</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 12px;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Information</h2>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Job Role</th>
</tr>
<tr>
<td>John</td>
<td>Developer</td>
</tr>
<tr>
<td>Sarah</td>
<td>Designer</td>
</tr>
<tr>
<td>Mike</td>
<td>Manager</td>
</tr>
</table>
</body>
</html>
The output displays a table with "First Name" and "Job Role" as horizontal headers with a gray background, followed by three rows of employee data −
Employee Information First Name | Job Role -----------|---------- John | Developer Sarah | Designer Mike | Manager
Multiple Column Headers
Following example shows a table with three horizontal header columns −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Header Columns</title>
<style>
table, th, td {
border: 1px solid #333;
border-collapse: collapse;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Details</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Technology</th>
</tr>
<tr>
<td>Amit</td>
<td>27</td>
<td>Database</td>
</tr>
<tr>
<td>Sachin</td>
<td>34</td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>
The output shows a table with three horizontal headers with green background and white text −
Employee Details Name | Age | Technology -------|-----|---------- Amit | 27 | Database Sachin | 34 | Marketing
Vertical Header Example
For comparison, here's how vertical headers are created by placing <th> elements as the first cell in each row −
<!DOCTYPE html>
<html>
<head>
<title>Vertical Table Headers</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 15px;
}
th {
background-color: #e0e0e0;
font-weight: bold;
text-align: left;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Vertical Header Table</h2>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<td>John</td>
<td>Sarah</td>
</tr>
<tr>
<th>Last Name</th>
<td>Doe</td>
<td>Smith</td>
</tr>
<tr>
<th>Job Role</th>
<td>Developer</td>
<td>Designer</td>
</tr>
</table>
</body>
</html>
The output displays vertical headers in the first column, with data extending horizontally −
Vertical Header Table First Name | John | Sarah Last Name | Doe | Smith Job Role | Developer | Designer
Comparison
Following table shows the key differences between horizontal and vertical table headers −
| Horizontal Headers | Vertical Headers |
|---|---|
| Headers placed in the first row (<tr>) | Headers placed as first cell in each row |
| All <th> elements in a single <tr> | One <th> element per <tr> |
| Label columns of data | Label rows of data |
| Most common table structure | Less common, used for comparison tables |
Conclusion
Horizontal headers are created by placing all <th> elements within the first <tr> of a table, providing column labels across the top. This is the most common table structure and makes data easy to read and understand in a columnar format.
3K+ Views
