如何在html中创建嵌套表

Question

我需要创建一个带有内表的 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>

Answer 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>&#10063;</td>
      <td>&#10063;</td>
      <td>&#10063;</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>&#10063;</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td></td>
   </tr>
   <tr>
      <td colspan="3">&nbsp;</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">&#10063;</td>
      <td rowspan="2">&#10063;</td>
      <td rowspan="2">&#10063;</td>
      <td></td>
   </tr>
   <tr>
      <td colspan="7" bgcolor="#8f9bff">BATH</td>
      <td colspan="2">Cane</td>
      <td></td>
   </tr>
   <tr>
      <td>&#10063; Tub</td>
      <td colspan="2">&#10063; Shower</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td></td>
      <td>Chair</td>
      <td>Bed</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td></td>
   </tr>
   <tr>
      <td>Bed</td>
      <td>&#10063; Partial</td>
      <td>&#10063; Complete</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td></td>
      <td>Dang...</td>
      <td>...mmod</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td></td>
   </tr>
   <tr>
      <td colspan="3">Assist Bath-Chair</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td>&#10063;</td>
      <td></td>
      <td colspan="2">Exercise</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td></td>
   </tr>
</table>