Back to: HTML Tutorials
Table Headers in HTML with Examples
In this article, I am going to discuss Table Headers in HTML with Examples. Please read our previous article where we discussed Table Sizes in HTML with Examples. At the end of this article, you will learn everything about HTML Table Headers with Examples.
Table Headers in HTML
In Html a table header is defined using a <th> tag where <th> stands for table header. Each <th> element represents one table cell. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
background-color:lightyellow;
padding:5px;
}
</style>
</head>
<body>
<br>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jack</td>
<td>Efron</td>
<td>33</td>
</tr>
<tr>
<td>Alex</td>
<td>Roberts</td>
<td>23</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Vertical Table Headers in HTML
To define the first column as a table header we need to represent the first cell of each row by an <th> element. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<br>
<table style="width:100%">
<tr>
<th>Firstname</th>
<td>Jack</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Anderson</td>
<td>Marrye</td>
</tr>
<tr>
<th>Age</th>
<td>49</td>
<td>28</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Align Table Headers in HTML
By default, the alignment of the table header is center but we can change the alignment by using CSS text-align property. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
background-color:lightblue;
padding:5px;
}
th{
text-align:left;}
</style>
</head>
<body>
<br>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jack</td>
<td>Efron</td>
<td>33</td>
</tr>
<tr>
<td>Alex</td>
<td>Roberts</td>
<td>23</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Table Header for Multiple Column in HTML
We can use a single header for multiple columns by using the colspan attribute inside the table header element. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
background-color:lightblue;
padding:5px;
}
</style>
</head>
<body>
<br>
<table style="width:100%">
<tr>
<th COLSPAN="2">Full Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jack</td>
<td>Efron</td>
<td>33</td>
</tr>
<tr>
<td>Alex</td>
<td>Roberts</td>
<td>23</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Table Caption in HTML
We can also give captions to the HTML table which serves as a heading for the entire table. A <caption> tag is used to add a caption to a table. For better understanding, please have a look at the below example.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
background-color:lightgreen;
padding:8px;
}
th{
text-align:left;}
</style>
</head>
<body>
<br>
<table style="width:100%">
<caption>Student Details </caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jack</td>
<td>Efron</td>
<td>13</td>
</tr>
<tr>
<td>Alex</td>
<td>Roberts</td>
<td>15</td>
</tr>
</table>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
In the next article, I am going to discuss Table Colspan and Rowspan in HTML with Examples. Here, in this article, I try to explain Table Headers in HTML with Examples and I hope you enjoy this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.