Plot a table using rowspan in html

Question

I need to create a table with the following structure. Any HTML code would of great help. Thanks!

Edit : [[Added the headers to table]].We need to create this table in an angular 9 application using typescript. Object structure is as follows. We might need to use ng-containers and loops to iterate through this structure:

value: [
        {
          mainHeader: 'Main Header1',
          subHeaders: [
            {
              subHeader: 'Sub Header1',
              details: [
                {
                  text: 'text1',
                  value: 'value1',
                },
                {
                  text: 'text2',
                  value: 'value2',
                },
              ],
            },
            {
              subHeader: 'Sub Header2',
              details: [
                {
                  text: 'text1',
                  value: 'value1',
                },
                {
                  text: 'text2',
                  value: 'value2',
                },
              ],
            },
          ],
        },
        {
          mainHeader: 'Main Header2',
          subHeaders: [
            {
              subHeader: 'Sub Header1',
              details: [
                {
                  text: 'text1',
                  value: 'value1',
                },
                {
                  text: 'text2',
                  value: 'value2',
                },
              ],
            },
            {
              subHeader: 'Sub Header2',
              details: [
                {
                  text: 'text1',
                  value: 'value1',
                },
                {
                  text: 'text2',
                  value: 'value2',
                },
              ],
            },
          ],
        },
      ],

Answer 1

<table style="height: 303px; width: 524.967px; border-color: black;">
<tbody>
<tr>
<td style="width: 80px;" rowspan="6">Main Header 1</td>
<td style="width: 80px;" rowspan="2">&nbsp;Sub Header1</td>
<td style="width: 80px;">&nbsp;Text1</td>
<td style="width: 80px;">&nbsp;Value1</td>
<td style="width: 80px;">&nbsp;Text1</td>
<td style="width: 81.9667px;">&nbsp;Value1</td>
</tr>
<tr>
<td style="width: 80px;">&nbsp;Text2</td>
<td style="width: 80px;">&nbsp;Value2</td>
<td style="width: 80px;">&nbsp;Text2</td>
<td style="width: 81.9667px;">&nbsp;Value2</td>
</tr>
<tr>
<td style="width: 80px;" rowspan="2">&nbsp;Sub Header 2</td>
<td style="width: 80px;">&nbsp;Text3</td>
<td style="width: 80px;">&nbsp;Value3</td>
<td style="width: 80px;">&nbsp;Text3</td>
<td style="width: 81.9667px;">&nbsp;Value3</td>
</tr>
<tr>
<td style="width: 80px;">&nbsp;Text4</td>
<td style="width: 80px;">&nbsp;Value4</td>
<td style="width: 80px;">&nbsp;Text4</td>
<td style="width: 81.9667px;">&nbsp;Value4</td>
</tr>
<tr>
<td style="width: 80px;" rowspan="2">&nbsp;Sub Header 3</td>
<td style="width: 80px;">&nbsp;Text5</td>
<td style="width: 80px;">&nbsp;Value5</td>
<td style="width: 80px;">&nbsp;Text5</td>
<td style="width: 81.9667px;">&nbsp;Value5</td>
</tr>
<tr>
<td style="width: 80px;">&nbsp;Text6</td>
<td style="width: 80px;">&nbsp;Value6</td>
<td style="width: 80px;">&nbsp;Text6</td>
<td style="width: 81.9667px;">&nbsp;Value6</td>
</tr>
<tr>
<td style="width: 80px;" rowspan="6">Main Header 2</td>
<td style="width: 80px;" rowspan="2">&nbsp;Sub Header1</td>
<td style="width: 80px;">&nbsp;Text1</td>
<td style="width: 80px;">&nbsp;Value1</td>
<td style="width: 80px;">&nbsp;Text1</td>
<td style="width: 81.9667px;">&nbsp;Value1</td>
</tr>
<tr>
<td style="width: 80px;">&nbsp;Text2</td>
<td style="width: 80px;">&nbsp;Value2</td>
<td style="width: 80px;">&nbsp;Text2</td>
<td style="width: 81.9667px;">&nbsp;Value2</td>
</tr>
<tr>
<td style="width: 80px;" rowspan="2">&nbsp;Sub Header 2</td>
<td style="width: 80px;">&nbsp;Text3</td>
<td style="width: 80px;">&nbsp;Value3</td>
<td style="width: 80px;">&nbsp;Text3</td>
<td style="width: 81.9667px;">&nbsp;Value3</td>
</tr>
<tr>
<td style="width: 80px;">&nbsp;Text4</td>
<td style="width: 80px;">&nbsp;Value4</td>
<td style="width: 80px;">&nbsp;Text4</td>
<td style="width: 81.9667px;">&nbsp;Value4</td>
</tr>
<tr>
<td style="width: 80px;" rowspan="2">&nbsp;Sub Header 3</td>
<td style="width: 80px;">&nbsp;Text5</td>
<td style="width: 80px;">&nbsp;Value5</td>
<td style="width: 80px;">&nbsp;Text5</td>
<td style="width: 81.9667px;">&nbsp;Value5</td>
</tr>
<tr>
<td style="width: 80px;">&nbsp;Text6</td>
<td style="width: 80px;">&nbsp;Value6</td>
<td style="width: 80px;">&nbsp;Text6</td>
<td style="width: 81.9667px;">&nbsp;Value6</td>
</tr>
</tbody>
</table>

Here is the HTML structure for your design . Make sure to stylize table as per your requirement .