The HTML Table Headers can be utilized to define a table’s header with the help of the <thead> tag. It is typically placed after the <caption> tags and should precede the <tbody> and <tfoot> tags. An HTML table can include a table header, footer, and body to organize its structure effectively.
In HTML tables, you can set headers for each column or row, or you can have headers that cover multiple columns or rows.
Table of Content
HTML Table with Header
The <thead> element is used to define the header section of a table. Headers provide labels for each column, making it easier to understand the content.
Example: The example below shows a simple table with table headers.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #7a3f3f;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Table with Header
</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Ravi</td>
<td>11</td>
<td>2</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shakshi</td>
<td>12</td>
<td>4</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
HTML Table with Vertical Header
HTML Table with Vertical header is define by placing <th> (table header) elements in the first column within each <tr> (table row).
Example: The example below shows a Vertical Header (first column) table headers.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,h3 {
text-align: center;
color: green;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #3a2626;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Table with Vertical Header</h3>
<table>
<thead>
<tr>
<th>Name</th>
<td>Mahima</td>
<td>Shivani</td>
<td>Bitto</td>
<td>Gauri</td>
<td>Kanha</td>
</tr>
<tr>
<th>Class</th>
<td>10</td>
<td>11</td>
<td>9</td>
<td>12</td>
<td>8</td>
</tr>
<tr>
<th>Roll No</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</thead>
</table>
</body>
</html>
|
Output:
Align Table Headers
By default, Table Headers are centered. To position them on the left, set the CSS property text-align to left.
Example: The example below shows a Header with left-align table headers.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
}
th,
td {
border: 1px solid #7a3f3f;
padding: 10px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Align Table Headers</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Ravi</td>
<td>11</td>
<td>2</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
Header for Multiple Columns with colspan
The colspan is used to make a table cell span multiple columns horizontally. It is used as an attribute to the <th> or <td> element, defining the number of columns the cell should span.
Example: Implementation of table header for Multiple Columns with colspan.
<!DOCTYPE html> <html>
<head>
<title>HTML colspan attribute</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 16px;
text-align: center;
width: 50%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Header for Multiple
Columns using colspan
</h3>
<table>
<tr>
<th>Name</th>
<th>Notes</th>
</tr>
<tr>
<td>kajal</td>
<td>1</td>
</tr>
<tr>
<td>sejal</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">Total: 3</td>
</tr>
</table>
</body>
</html>
|
Output:
HTML Table with Caption
A table caption is used to provide brief description for an HTML table. The <caption> element is used to define the caption for a table. It should be placed immediately after the opening <table> tag. The caption appears centered above the table content.
Example: Implementation of table with caption.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table header</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border-collapse: collapse;
width: 100%;
}
thead {
background-color: rgb(145, 196, 145);
}
th,
td {
border: 2px solid #244d28;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Table with Caption
</h3>
<table>
<caption>Student Data</caption>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahima</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Krishn</td>
<td>8</td>
<td>3</td>
</tr>
<tr>
<td>Shakshi</td>
<td>12</td>
<td>4</td>
</tr>
<tr>
<td>Shivika</td>
<td>8</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
|
Output:
HTML DOM Property
Browser Support
- Chrome 1
- Edge 12
- Firefox 1
- Opera 12.1
- Safari 1