The <thead> tag in HTML is used to define the header section of a table. It helps organize table data by separating the header, body, and footer sections for better structure and readability.
- Used to group table header content inside an HTML table.
- Usually placed before <tbody> and <tfoot> tags.
- Supports headers for rows, columns, and multiple rows or columns.
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 shows a simple table with table headers.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
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 shows a Vertical Header (first column) table headers.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Align Table Headers
By default, Table Headers are centered. To position them on the left, set the CSS property text-align to left.
Example: This shows a Header with left-align table headers.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML colspan attribute</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->