在 html 中使用 rowspan 绘制表格

Question

我需要创建一个具有以下结构的表。 任何 HTML 代码都会有很大帮助。 谢谢！

编辑：[[将标题添加到表]]。我们需要使用打字稿在 angular 9 应用程序中创建此表。 对象结构如下。 我们可能需要使用 ng-containers 和循环来遍历这个结构：

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>

这是您设计的 HTML 结构。 确保根据您的要求对表格进行风格化。