How to add multiple header HTML table?

Question

I want to Design a table that has multiple headers. The table design is there:

Multiple header HTML table design link

Welcome to [Stack Overflow](http://stackoverflow.com/)! You need to try to write the code **yourself**. After doing [research](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) 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](http://stackoverflow.com/help/mcve)**. Read [How to Ask a good question](http://stackoverflow.com/help/how-to-ask). Also, be sure to take the [tour](http://stackoverflow.com/tour). — Sank6, May 10 '17 at 16:14

score 17 · Accepted Answer · answered May 10 '17 at 16:31

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>

Sid · Answer 2 · 2019-09-05T15:32:40.917

<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 &nbsp;&nbsp;&nbsp; </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">&nbsp;</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>

How to add multiple header HTML table?

2 Answers2