在 HTML table 的帮助下创建发票设计

Question

我正在尝试以简单的方式创建发票设计 HTML table。我尽了最大努力，但无法在 HTML 中创建该设计。我是 HTML 的初学者，甚至阅读了 w3school 的所有章节。但是我不知道我在HTML中是如何设计的？我尝试了下面的代码，但没有达到预期。我附加图片时 html 标签设计的代码是什么？

<table style="height: 90px; width: 100%; border-collapse: collapse; border-style: solid;" border="1">
  <tbody>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">A</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<table style="border-collapse: collapse; width: 100%; height: 36px;" border="1">
  <tbody>
    <tr style="height: 18px;">
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" border="1">
  <tbody>
    <tr>
      <td style="width: 100%;">&nbsp;</td>
    </tr>
  </tbody>
</table>

image as expected table in HTML

Answer 1

<style>
  table{
 height: 90px;
  width: 100%; 
  border-collapse: collapse; 
  border-style: solid;
  
}
tr{height: 18px;}
.s1-l{height:120px}
.s1{width: 50%; height: 18px;}
.s2{width: 25%; height: 18px;}
.s3{width: 12.5%; height: 18px;}
.c1{border: 1px solid black}
</style>
<table border="1" style="width:100%">
  <tbody class="c1">
    <tr><th rowspan="3" colspan="4">A</th><th colspan="2">D</th><th colspan="2">E</th></tr>
    <tr><th  colspan="2">F</th><th colspan="2">G</th></td></tr>
    <tr><th colspan="2">H</th><th colspan="2">I</th></tr>
    <tr><th colspan="4" rowspan="2">B</th><th colspan="2">J</th><th colspan="2">K</th></tr>
    <tr><th colspan="4" rowspan="4">L</th></tr>
    <tr><th colspan="4" rowspan="3">C</th></tr>
  </tbody>
<ttbody>
  <tr><td >SL</td><td>Items</td><td>Due Dt</td><td>Qty</td><td>Rate</td><td>Per</td><td>Dis%</td><td>Amt</td></tr>
   <tr><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></tr>
   <tr><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></tr>
   <tr><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></tr>
  </tbody>
<tbody>
   <tr><td colspan="3">AMT IN WORD</td><td></td><td></td><td></td><td></td><td>E.& 0.E</td></tr>

   <tr><td></td><td></td><td></td><td></td><td colspan="4" rowspan="4"></td></tr>
   <tr><td colspan="3">COMPANY NAME</td></tr>
   <tr><td></td><td></td><td></td><td></td></tr>
   <tr><td></td><td></td><td></td><td></td></tr>
   </tbody>
</table>

这里我重新做了代码。使用 table 你必须事先知道 table 的大小。所以这个 table 是 24 x 8。然后你必须逐行（tr）然后标记它们。使用 colspan 和 rowspan 根据您的需要调整它的大小。 tbody 可用于快速设置其中的多个单元格的样式。我还添加了一个样式块来向您展示您可以使用 class 来快速更新具有 class 的所有样式。我最终没有使用你的风格。另外我使用 th 标签而不是 td 因为它有默认的中心和粗体样式。

Answer 2

这是一个使用 colspan 和 rowspan 的可能示例。

/*to show cell's position*/

table,
td {
  border: solid 2px black;
  text-align: center;
  border-collapse: collapse;
}

.bold~tr td {
  border: solid 1px lightgray;
}

td {
  padding: 0.5em;
}

[colspan="4"][rowspan="2"] {
  height: 6em;
}

<table>
  <tr>
    <td colspan="4" rowspan="3">A</td>
    <td colspan="2">D</td>
    <td colspan="2">E</td>
  </tr>
  <tr>
    <td colspan="2">F</td>
    <td colspan="2">G</td>
  </tr>
  <tr>
    <td colspan="2">H</td>
    <td colspan="2">I</td>
  </tr>
  <tr>
    <td colspan="4" rowspan="2">B </td>
    <td colspan="2">J</td>
    <td colspan="2">K</td>
  </tr>
  <tr>
    <td colspan="4" rowspan="2"> L </td>
  </tr>
  <tr>
    <td colspan="4">C</td>
  </tr>
  <tr>
    <td>SL</td>
    <td>Items</td>
    <td>Due DT</td>
    <td>Qty</td>
    <td>Rate</td>
    <td>Per</td>
    <td>Dis%</td>
    <td>Amt</td>
  </tr>
  <tr>
    <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>
  </tr>
  <tr>
    <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>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bold">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">AMT IN WORD</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>E. & O.E</td>
  </tr>
  <tr>
    <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 colspan="4" rowspan="4"></td>
  </tr>
  <tr>
    <td colspan="4">COMPAGNY NAME</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

您可以通过搜索引擎找到的教程：

https://html.com/tables/rowspan-colspan/

在 HTML table 的帮助下创建发票设计

Creating invoice design with the help of HTML table

html

css

html-table