March 19, 2024
How can I set both horizontal and vertical headers in a table?The <th> element is used to give a header in Table. It’s very similar to the <td> element but it’s typically bold and centered by default. Before we learn to give both headers together, let's look at both separately.
Horizontal Header
<!DOCTYPE html>
<html lang="en">
<head>
<title>Horizontal Header</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Roll no.</th>
<th>Student Names</th>
<th>Total Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark Dyol</td>
<td> 99 </td>
</tr>
<tr>
<td> 2 </td>
<td> John Smith </td>
<td> 95 </td>
</tr>
<tr>
<td> 3 </td>
<td> Remi Snap </td>
<td> 98 </td>
</tr>
</tbody>
</table>
</body>
</html>
In the above example, <th> (Table Header) element is written between <tr> element. <tr> element defines the row.
Vertical Header
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vertical Header</title>
</head>
<body>
<table border="1">
<tbody>
<tr>
<th>Roll No.</th>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<th>Student Names</th>
<td> Mark Dyol</td>
<td> John Smith </td>
<td> Remi Snap </td>
</tr>
<tr>
<th>Total Marks</th>
<td> 99 </td>
<td> 95 </td>
<td> 98 </td>
</tr>
</tbody>
</table>
</body>
</html>
In this example, We can see the heading of the row which is written with every row of data.
Horizontal with Vertical Header
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Table</title>
<style>
th {
color: rgb(18, 18, 155);
}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="4" style="color: brown;"> Time Table </th>
</tr>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<th>9:00 AM</th>
<td rowspan="2">Team Meating </td>
<td rowspan="4">Work</td>
<td rowspan="3">Work</td>
</tr>
<tr>
<th>10:00 AM</th>
</tr>
<tr>
<th>11:00 AM</th>
<td rowspan="2">Work</td>
</td>
</tr>
<tr>
<th>12:00 PM</th>
<td rowspan="2">Team Meating</td>
</tr>
<tr>
<th>01:00 PM</th>
<td>Lunch</td>
<td>Lunch</td>
</tr>
</table>
</body>
</html>