我正在做一个项目，我需要将一个使用<div>元素设计的复杂布局转换为使用<table>、<tr>、<td>、<colspan>和<rowspan>标记的HTML表格。该布局当前使用CSS进行样式化，我希望在将其转换为表格格式时保持相同的结构和外观。

**Input：**我有一系列<div>元素，它们以表格格式表示标题和数据单元格。每个<div>都有多个class属性，对应于特定的CSS样式，定义它们的位置和大小。下面是当前基于div的布局的片段：

<div class="c x1b y41 wf h14">Project</div>
<div class="c x20 y43 w10 h6">2023</div>
<div class="c x21 y43 w11 h6">2022</div>
<div class="c x23 y43 w12 h6">2021</div>
<div class="c x1e y43 w13 h6">2020</div>

<div class="c x20 y41 w14 h9">Amount</div>
<div class="c x26 y41 w15 h9">Ratio</div>
<div class="c x21 y41 w16 h9">Amount</div>
<div class="c x28 y41 w17 h9">Ratio</div>
<div class="c x23 y41 w18 h9">Amount</div>
<div class="c x29 y41 w19 h9">Ratio</div>
<div class="c x1e y41 w1a h9">Amount</div>
<div class="c x2a y41 w1b h9">Ratio</div>

<div class="c x1b y44 wf h6">Income</div>
<div class="c x20 y44 w14 h6">9.6</div>
<div class="c x26 y44 w15 h6">100.00</div>
<div class="c x21 y44 w16 h6">377.78</div>
<div class="c x28 y44 w17 h6">100.00</div>
<div class="c x23 y44 w18 h6">293.47</div>
<div class="c x29 y44 w19 h6">100.00</div>
<div class="c x1e y44 w1a h6">210.66</div>
<div class="c x2a y44 w1b h6">100.00</div>

字符串

**CSS样式：**布局由这些CSS样式控制，它们决定div的尺寸和位置：

.h14 {height: 41.215200px;}
.h6 {height: 20.280000px;}
.h9 {height: 20.311200px;}
.w10 {width: 116.095200px;}
.w11 {width: 116.251200px;}
.w12 {width: 116.376000px;}
.w13 {width: 122.959200px;}
.w14 {width: 55.099200px;}
.w15 {width: 60.216000px;}
.w16 {width: 58.188000px;}
.w17 {width: 57.283200px;}
.w18 {width: 61.152000px;}
.w19 {width: 54.600000px;}
.w1a {width: 61.963200px;}
.w1b {width: 60.372000px;}
.wf {width: 73.008000px;}
.x1b {left: 112.450000px;}
.x1e {left: 537.830800px;}
.x20 {left: 186.914000px;}
.x21 {left: 303.641000px;}
.x23 {left: 420.511000px;}
.x26 {left: 242.801000px;}
.x28 {left: 362.609000px;}
.x29 {left: 482.287000px;}
.x2a {left: 600.262000px;}
.y41 {bottom: 490.373000px;}
.y43 {bottom: 511.303000px;}
.y44 {bottom: 469.313000px;}

型

**预期结果：**我想将此布局转换为HTML表格。预期的表格结构应类似于以下内容：

<table border="1">
  <tr>
    <td rowspan="2">Project</td>
    <td colspan="2">2023</td>
    <td colspan="2">2022</td>
    <td colspan="2">2021</td>
    <td colspan="2">2020</td>
  </tr>
  <tr>
    <td>Amount</td>
    <td>Ratio</td>
    <td>Amount</td>
    <td>Ratio</td>
    <td>Amount</td>
    <td>Ratio</td>
    <td>Amount</td>
    <td>Ratio</td>
  </tr>
  <tr>
      <td>Income</td>
      <td>9.6</div></td>
      <td>100.00</td>
      <td>377.78</td>
      <td>100.00</td>
      <td>293.47</td>
      <td>100.00</td>
      <td>210.66</td>
      <td>100.00</td>
  </tr>
</table>

型

**尝试：**我尝试了几种方法来解析div并应用它们的样式来创建表格，但没有一种有效。我尝试了JavaScript来动态读取CSS属性并将它们作为属性应用于表格单元格，但我遇到了维护布局完整性的问题，特别是当涉及到跨行和跨列时。
**问题：**任何人都可以提供指导或解决方案，如何以编程方式将这种基于div的布局转换为HTML表格，考虑CSS样式？任何帮助解析CSS以定义表格中适当的<colspan>和<rowspan>值的帮助都将不胜感激。