How to create a child heading under parent heading in html table? - html

Question

I want to make this template with html tables,
This is my html code
<table>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>
<table>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</td>
<td>data</td>
</tr>
</table>
But it is not giving me the right format like the image above. How can i do it with table?

Answer 1

For the template as per the reference, you need to use this code
table { border: 1px solid #000; border-collapse: collapse; }
table th { padding: 5px 10px; border: 1px solid #000; }
table td { padding: 5px 10px; border-left: 1px solid #000; border-right: 1px solid #000; }
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th rowspan="2">Sr. No.</th>
<th rowspan="2">Description of Goods</th>
<th rowspan="2">HSN</th>
<th rowspan="2">Qty.</th>
<th rowspan="2">Unit</th>
<th rowspan="2">Rate (per item)</th>
<th rowspan="2">Total</th>
<th rowspan="2">Discount</th>
<th rowspan="2">Taxable Value</th>
<th colspan="2" align="center">CGST</th>
<th colspan="2" align="center">SGST</th>
<th colspan="2" align="center">IGST</th>
</tr>
<tr>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

Answer 2

Several ways to do this. You could use a table in a td or you could make use of colspan and rowspan like in my example.
Good luck.
table {
border-collapse: collapse;
height: 100px;
font-size: 10px;
text-align: center;
}
td {
padding: 5px;
border: solid 1px black;
}
<table>
<tr>
<td rowspan=2>Sr.No</td>
<td rowspan=2>Description of Goods</td>
<td rowspan=2>HSN</td>
<td rowspan=2>Qty.</td>
<td rowspan=2>Unit</td>
<td rowspan=2>Rate(per item)</td>
<td rowspan=2>Total</td>
<td rowspan=2>Discount</td>
<td rowspan=2>Taxable value</td>
<td colspan=2>CGST</td>
<td colspan=2>SGST</td>
<td colspan=2>IGST</td>
</tr>
<tr>
<td>Rate</td>
<td>Amt.</td>
<td>Rate</td>
<td>Amt.</td>
<td>Rate</td>
<td>Amt.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Answer 3

It is called as Table with Irregular Headers
You have to use
<th colspan="2" scope="colgroup">MainHeadername</th>
for main Header and
<th scope="col">SubHeaderName</th>
for Sub Headers
This Reference will be Helpful for further clarifications
https://www.w3.org/WAI/tutorials/tables/irregular/

Answer 4

You can do this using colspan:
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<th>65</th>
<th>80</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>