【问题标题】：How to create nested table in html [duplicate]如何在html中创建嵌套表[重复]
【发布时间】：2020-04-30 21:38:00
【问题描述】：
我需要创建一个带有内部表格的 HTML 表格，如下图所示：
[示例][1]
如果我应该为左侧表和右侧表创建两个单独的表或将它们组合在一个表中，我感到困惑
我尝试了下面的示例，但它没有以我想要的格式生成，基本上，它没有生成内部 HTML 表：
<table >
<thead>
<tr>
<th>VITAL SIGNS</th>
<th>FREQUENCY</th>
<th></th>
<th>TOTAL SUPPORT</th>
<th>ASSIST</th>
<th>SEE CARE</th>
<th>FREQUENCY</th>
</tr>
</thead>
<tbody>
<tr>
<th>Temperature</th>
<th><input type="text" /></th>
<th>SKIN CARE</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>BP</th>
<th><input type="text" /></th>
<th>APPLY LOTION</th>
<th><input type="checkbox" /></th>
<th><input type="checkbox" /></th>
<th><input type="checkbox" /></th>
<th><input type="text" /></th>
</tr>
<tr>
<th>Pulse</th>
<th><input type="text" /></th>
<th>ACTIVITY</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Respiration</th>
<th><input type="text" /></th>
<th><input type="checkbox" />
<input type="checkbox" />
</th>
<th><input type="checkbox" /></th>
<th><input type="checkbox" /></th>
<th><input type="checkbox" /></th>
<th><input type="text" /></th>
</tr>
<tr>
<th></th>
<th>
<th>TOTAL SUPPORT</th>
<th>ASSIST</th>
<th>SELF CARE</th>
<th>FREQUENCY</th>
</th>
</tr>
</tbody>
</table>
【问题讨论】：
标签：
html
html-table
datatable
nested-table
【解决方案1】：
您需要记住，表格会尝试使它们的单元格相等，以确保它是一个完整且封闭的表格。因此，要将打印的表格转换为 HTML，需要使用 HTML 属性 colspan 和 rowspan 来“合并”单元格。
将这样的打印表格毫无问题地翻译成 HTML 是很困难的。表格将始终适应内容和屏幕。
这是一个（非常）粗略表示您如何构建它，但是某些复选框项目甚至可以分组在一个单元格内，而不是破坏它们分成不同的单元格。但是，如果要对任何内容进行分组，则需要进行轻微的重组。
<style>
table, td {border-collapse: collapse;}
td {border:1px solid black; padding:5px; font-size:10px;}
</style>
<table style="width:100%;">
<tr>
<td colspan="3" width="10%" bgcolor="#8f9bff">VITAL SIGNS</td>
<td colspan="4" width="30%" bgcolor="#8f9bff">FREQUENCY</td>
<td colspan="2" width="10%"></td>
<td width="30" bgcolor="#b47cff">TOTAL SUPPORT</td>
<td width="30" bgcolor="#b47cff">ASSIST</td>
<td width="30" bgcolor="#b47cff">SEE CARE</td>
<td bgcolor="#b47cff">FREQUENCY</td>
</tr>
<tr>
<td colspan="3">Temperature</td>
<td colspan="4"></td>
<td colspan="6" bgcolor="#8f9bff">SKIN CARE</td>
</tr>
<tr>
<td colspan="3">BP</td>
<td colspan="4"></td>
<td colspan="2">Apply Lotion</td>
<td>❏</td>
<td>❏</td>
<td>❏</td>
<td></td>
</tr>
<tr>
<td colspan="3">Pulse</td>
<td colspan="4"></td>
<td colspan="6" bgcolor="#8f9bff">ACTIVITY</td>
</tr>
<tr>
<td colspan="3">Respiration</td>
<td colspan="4"></td>
<td>Ambu...</td>
<td>Mob...</td>
<td>❏</td>
<td>❏</td>
<td>❏</td>
<td></td>
</tr>
<tr>
<td colspan="3"> </td>
<td bgcolor="#b47cff">TOTAL SUPPORT</td>
<td bgcolor="#b47cff">ASSIST</td>
<td bgcolor="#b47cff">SEE CARE</td>
<td bgcolor="#b47cff">FREQUENCY</td>
<td>Walker</td>
<td>Wheelchair</td>
<td rowspan="2">❏</td>
<td rowspan="2">❏</td>
<td rowspan="2">❏</td>
<td></td>
</tr>
<tr>
<td colspan="7" bgcolor="#8f9bff">BATH</td>
<td colspan="2">Cane</td>
<td></td>
</tr>
<tr>
<td>❏ Tub</td>
<td colspan="2">❏ Shower</td>
<td>❏</td>
<td>❏</td>
<td>❏</td>
<td></td>
<td>Chair</td>
<td>Bed</td>
<td>❏</td>
<td>❏</td>
<td>❏</td>
<td></td>
</tr>
<tr>
<td>Bed</td>
<td>❏ Partial</td>
<td>❏ Complete</td>
<td>❏</td>
<td>❏</td>
<td>❏</td>
<td></td>
<td>Dang...</td>
<td>...mmod</td>
<td>❏</td>
<td>❏</td>
<td>❏</td>
<td></td>
</tr>
<tr>
<td colspan="3">Assist Bath-Chair</td>
<td>❏</td>
<td>❏</td>
<td>❏</td>
<td></td>
<td colspan="2">Exercise</td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>