Table Headers in HTML with Example
Table headers in HTML contain the titles of column or row, which help to describe the data presented in the table. These headers are marked up using <th> (table header) elements, which go inside the <tr> (table row) element. Each <th> element represents a table header cell within <tr> element.
The <th> elements are usually placed within a <thead> (table head) section to define column headers. However, we can also place them within <tbody> (table body) or <tfoot> (table footer) sections for defining row headers or footers that need header cells.
In HTML, we can also define table headers for individual columns or rows, as well as for multiple columns or rows. This feature allows us to define table header to accurately describe the table data. Let’s see with various example codes for practices.
HTML Table Headers
Let’s take an example in which we will create a basic table in HTML with three table headers (<th> elements) in the first row. These headers are: Firstname, Lastname, and age.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style = "width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Saanvi</td>
<td>Kumari</td>
<td>15</td>
</tr>
<tr>
<td>Ivaan</td>
<td>Sagar</td>
<td>19</td>
</tr>
<tr>
<td>Mark</td>
<td>Smith</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output:
[adinserter block=”5″]
Vertical Table Headers in HTML
To create vertical table headers in an HTML, we only need to set the first table cell in each table row to the table header <th> elements. If you set it as, then the first column effectively becomes table headers. Here’s a simple example of an HTML table with three vertical headers. Each table row will contain one table header (i.e. <th> element).
Example 2:
<!DOCTYPE html>
<head>
<title>Vertical Table Headers</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table style= "width:100%">
<tr>
<th>Item</th>
<td>Tablet</td>
<td>Laptop</td>
<td>Monitor</td>
</tr>
<tr>
<th>Price</th>
<td>$200</td>
<td>$600</td>
<td>$300</td>
</tr>
<tr>
<th>Quantity</th>
<td>20</td>
<td>50</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Output:
Note:
Table headers: By default, table headers (<th> elements) are bold and centered. This is the default styling provided by most browsers to visually distinguish header cells from data cells. You can use the text-align property of CSS to change the alignment of text in the table headers.
[adinserter block=”2″]
Table Data: Bt default, table data cells (<td> elements) are left-aligned and not bold. This default styling is to differentiate the data content from the headers and is typically more readable for text or numbers. In this example, we have used CSS property text-align: center; to align headers and data at the center.
Table with Row and Column Headers
Let’s take an example code where we will create an HTML table with both row and column headers.
Example 3:
<!DOCTYPE html>
<head>
<title>Table with Row and Column Headers</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th {
background-color: #f2f2f9;
}
</style>
</head>
<body>
<table style= "width:100%">
<thead>
<tr>
<th></th> <!-- Empty cell for alignment -->
<th>Monday</th>
<th>Tuesday</th>
</tr>
</thead>
<tbody>
<tr>
<th>Morning</th>
<td>Yoga</td>
<td>Running</td>
</tr>
<tr>
<th>Evening</th>
<td>Weights</td>
<td>Swimming</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Creating A Header for Multiple Columns
We can have a header that spans over two or more columns using colspan attribute. This attribute is used within <th> element to specify the number of columns that a single cell spans horizontally across multiple columns.
We can span a header cell across multiple columns using colspan = “number”, where the number denotes how many columns the cell will cover. For example, colspan=”2″ means that the cell will span across two columns.
Example 4:
<!DOCTYPE html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th {
background-color: #f2f2f9;
}
</style>
</head>
<body>
<table style="width:100%">
<thead>
<tr>
<th colspan="3">Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahi</td>
<td>Tripti</td>
<td>Deepak</td>
<td>20</td>
</tr>
<tr>
<td>Smith</td>
<td>Jackson</td>
<td>Mark</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>
Example 5:
<table style="width:100%"> <thead> <tr> <th colspan="2">Grouped Column Header</th> </tr> <tr> <th>Column Header 1</th> <th>Column Header 2</th> </tr> </thead> <tbody> <tr> <td>Data Cell 1</td> <td>Data Cell 2</td> </tr> <!-- Additional rows... --> </tbody> </table>
Creating A Header for Multiple Rows
A header for multiple rows in HTML table is created by using the rowspan attribute within <th> element. This attribute spans a cell vertically across multiple rows. It is especially useful when we need to group or categorize multiple rows under a single header.
We can span a cell for multiple rows using rowspan = “number”. Here, number represents the number of rows we want the cell to span. For example, rowspan=”3″ means the cell will span across three rows.
Example 6:
<!DOCTYPE html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th {
background-color: #f2f2f9;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Grade</th>
<th>Class</th>
<th>Teacher</th>
</tr>
<tr>
<th rowspan="2">Grade 10</th>
<td>Math</td>
<td>Mr. Smith</td>
</tr>
<tr>
<td>Science</td>
<td>Ms. Johnson</td>
</tr>
<tr>
<th rowspan="3">Grade 11</th>
<td>History</td>
<td>Mr. Brown</td>
</tr>
<tr>
<td>English</td>
<td>Ms. White</td>
</tr>
<tr>
<td>Art</td>
<td>Mr. Green</td>
</tr>
</table>
</body>
</html>
Output:
In this tutorial, we explained table headers in HTML through various example codes. We hope that you will have understood how to create headers in HTML table for individual columns or rows, as well as for multiple columns or rows.
Happy coding!!!
