Question

我想设计一个包含多个标题的表。表设计在那里：

Multiple header HTML table design link

Answer 1

看看这个fiddle

关于colspan和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>

Answer 2

<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>

如何添加多个头HTML表？

2 个答案: