如何添加多个标题 HTML 表格?

Posted

技术标签:

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

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

【问题讨论】:

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

【讨论】:

以上是关于如何添加多个标题 HTML 表格?的主要内容,如果未能解决你的问题,请参考以下文章

调用 html 时,如何从包含多个表格的 HTML 文件中显示特定表格? [关闭]

Html如何制作具有多个标题的表格?

如何在swift ios中将多个图像添加到自定义表格视图单元格?

如何将html表格转换为具有多个工作表的excel?

如何在 HTML 中更改多个表格?

Pandas:如何将多个数据帧作为 HTML 表格引用和打印