![How to Create Nested Table in Html [Duplicate]](https://docuprint.cloud68.co/uploads/how-to-create-nested-table-in-html_1200.jpg)
I need to create an HTML table with an inner table like the below-given diagram:
[Example][1] I'm confused if I should create two separate tables for both left side and right side table or combine them together in a single table
I tried below example, but it's not getting generated in the format I want, basically, it's not generating the inner HTML table:
<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>
1 Answer
You need to remember that tables will try to equal their cells out to make sure it is a complete and closed table. So to translate the printed table into HTML, requires 'merging' cells by using the HTML properties colspan and rowspan.
It's tough to translate a print table like that into HTML, without issue. The table will always adapt to the content and the screen.
Here is a (very) crude representation of how you could structure it, however some of the checkbox items could even be grouped inside one cell, rather than breaking them out into separate cells. However, that would require a slight restructure if you were to group anything.
<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>
