借助 HTML 表創建發票設計

Question

我正在嘗試在一個簡單的 HTML 表中創建發票設計。 我盡了最大努力，但我無法在 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>

圖像與 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>

在這里我重新做了代碼。 使用桌子，您必須事先知道桌子的大小。 所以這個表是 24 x 8。然后你必須逐行（tr）到 go 然后 label 他們。 使用 colspan 和 rowspan 根據您的需要調整它的大小。 tbody 可用於快速設置其中的許多單元格的樣式。 我還添加了一個樣式塊，向您展示您可以使用 class 來快速更新具有該 class 的所有內容的樣式。 我最終沒有使用您的 styles。 此外，我使用 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. & OE</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/