Invoice design in HTML Table

[devac9039]

I am trying to create an invoice design in a simple HTML table.
I tried my best but I unable to create that design in HTML.
I am a beginner in HTML and even read all chapters in w3school. but I don’t know how I design this in HTML?
I tried the below code but it not as expected. Please help me what would be the code for the html tab;e design as I attached the image, Please help me.

<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>

[ErnieAlex]

Well, that is a loaded question… You can create a webpage and put the table inside it and that would make the page. But, if you wish to enter data for it, where is that data coming from? Have you created a database to hold the info? Are you wanting to create a webpage with inputs for the user to fill in the invoice data?
To help you, we would need more information on what you want to do with this form…

[skawid]

HTML has better solutions to laying out content. The table containing the separate items would be a table, but the rest of this should be prepared using the newer CSS grid feature. Your desired result is also pretty complicated; if I were you I’d find a course that takes you through the basics of HTML and CSS and builds you up to a layout like this. There’s a few options here, one of them should help you get started.

[ErnieAlex]

If you just want an invoice and nothing else, here is a good example of one[:Make an Editable/Printable HTML Invoice | CSS-Tricks](https://css-tricks.com/html-invoice It is from the site that Skawid posted. Thank him…