How to add multiple header HTML table?

bootstrap-table, database-design, html

Solution

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>

Problem

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

Original source