I want to Design a table that has multiple headers. The table design is there:
How to add multiple header HTML table?
Asked Answered
What's stopping you? –
Microchemistry
Welcome to Stack Overflow! You need to try to write the code yourself. After doing research and you still have a problem you can post what you've tried with a clear explanation of what isn't working and providing a Minimal, Complete, and Verifiable example. Read How to Ask a good question. Also, be sure to take the tour. –
Companionway
Have a look at this fiddle
All about colspan and rowspan
<table>
<thead>
<tr>
<th rowspan="2" colspan="1" >
Client Name
</th>
<th rowspan="2" colspan="1">
Date
</th>
<th rowspan="1" colspan="5">
All Appointments
</th>
<th rowspan="1" colspan="3" >
Fulfilled Appointments
</th>
</tr>
<tr>
<th>Total number of individual appointments</th>
<th >Hours Of Care Delivered</th>
<th>Total Value</th>
<th>Average Cost Per Hour</th>
<th>Average Cost Per Hour Per Carer</th>
<th>Total Number</th>
<th>Hours Of Care Fulfilled</th>
<th>Total Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
<html>
<head>
<title>Table</title>
<style>
table,th,td {
border: 2px solid red;
border-collapse: collapse;
}
.heightu{
height: 212px;
}
div.First {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Second {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Third {
border: 1px solid red;
width: 39px;
height:10px;
left: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Sl.No</th>
<th rowspan="2">Name</th>
<th colspan="2">Date:15/05/2021</th>
<th rowspan="2">Do </th>
</th>
</tr >
<tr>
<th rowspan=>Start Hour</th>
<th rowspan=>End Hour</th>
</tr>
<tr>
<td>1</td>
<td>John Ddoe</td>
<td ><div class="First"></div></td>
<td><div class="Second"> </div></td>
<td><div class="Third"></div></td>
</tr>
<tr class="heightu">
<td></td>
<td></td>
</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
</body>
</html>
© 2022 - 2024 — McMap. All rights reserved.