Search code examples
htmldatabase-designbootstrap-table

How to add multiple header HTML table?


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

Multiple header HTML table design link


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>