如何添加多个标题 HTML 表格？答案

【问题标题】：How to add multiple header HTML table?如何添加多个标题 HTML 表格？
【发布时间】：2017-10-09 09:59:17
【问题描述】：

我想设计一个有多个标题的表格。桌子设计在那里：

【问题讨论】：

什么阻止了你？
欢迎来到Stack Overflow！您需要尝试自己编写代码。在完成research 之后，您仍然遇到问题，您可以发布您尝试过的内容，并明确说明什么不起作用，并提供一个Minimal, Complete, and Verifiable example。阅读How to Ask a good question。另外，请务必使用tour。

标签： html database-design bootstrap-table

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：