Search code examples
htmlcssmargins

Correctly positioning a QR code image in an HTML invoice template

"I am working on creating an HTML template for an invoice and am having some difficulty placing the QR code image in the correct location. Specifically, I want the QR code image to appear directly under the invoice information table, but it is not appearing in the desired location.

  table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 10px auto;
  font-size: 14px;
  color: #1e2b40;
}

td,
th {
  border: 1px solid gray;
  padding: 6px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.contact-info {
  font-family: Arial, sans-serif;
  font-size: 12px;
  float: right;
  margin: 1px auto;
  font-weight: normal;
}

.contact-info ul {
  list-style-type: none;
}

.qr-code {
  clear: both;
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.srs.logo {
  width: 300px;
  height: 150px;
  margin: 10px auto;
}

.items-table {
  float: left;
  padding: 6px;
  margin: 10px auto;
  border-collapse: collapse;
  width: 100%;
}

.items-table th,
.items-table td {
  border: 1px solid gray;
  padding: 6px;
<header>
  <!-- header content goes here -->

  <img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" />

  <div class="contact-info" style="list-style-type: none">
    <ul>
      <li>SARL RO SOLUTION</li>
      <li>RC: RC:</li>
      <li>NIF: NIF</li>
      <li>AI: AI</li>
      <li>Phone: Phone:</li>
      <li>Email: [email protected]</li>
    </ul>
  </div>

</header>

<hr style="margin-top: 100px;">

<!-- rest of the page content goes here -->


<table style="float: left;">
  <tr>
    <td colspan="2" class="center bold">Customer Information</td>
    <tr>
      <tr>
        <td>Customer Name:</td>
        <td>&lt;&lt;[Customer Name]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer Address:</td>
        <td>&lt;&lt;[Customer Address]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer NIF:</td>
        <td>&lt;&lt;[Customer NIF]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer RC:</td>
        <td>&lt;&lt;[Customer RC]&gt;&gt;</td>
      </tr>
      <tr>
        <td>Customer AI:</td>
        <td>&lt;&lt;[Customer AI]&gt;&gt;</td>
        <tr>
          <td>Telephone:</td>
          <td>&lt;&lt;[Company AI]&gt;&gt;</td>
        </tr>
</table>


<table style="float: right; margin: 0 auto">
  <tr>
    <td colspan="2" class="center bold">Invoice Information</td>
    <tr>
      <td>Invoice Date:</td>
      <td>&lt;&lt;[Invoice Date]&gt;&gt;</td>
      <tr>
        <td>Invoice ID:</td>
        <td>&lt;&lt;[Invoice ID]&gt;&gt;</td>
      </tr>
</table>


<br style="clear: both;">

<img src="<<[Invoice Date]>>" alt="qr-code">


<br style="clear: both;">
<hr>


<table style="float: left;">
  <tr>
    <td rowspan="1" class="center bold">Related Sales</td>
    <td colspan="" class="center bold">Invoice Information</td>
</table>

<br style="clear: both;">

<hr>

<table class="items-table">


  <thead>
    <tr>
      <th>Item description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <p class="startifend">&lt;&lt;Start:[invoice_key].[Related invoice_items]&gt;&gt;</p>
    <tr>
      <td>&lt;&lt;[description]&gt;&gt;</td>
      <td>&lt;&lt;[quantity]&gt;&gt;</td>
      <td>&lt;&lt;[unit_price]&gt;&gt;</td>
      <td>&lt;&lt;[total_price]&gt;&gt;</td>
    </tr>
    <p class="startifend">&lt;&lt;End&gt;&gt;</p>
  </tbody>
</table>
<br style="clear: both;">
<hr>

Solution

  • I'm going to presume you have a good reason for using tables over grid/flexbox.

    A couple of issues to note. Firstly, be very care to always close your <tr> tags there were many unclosed tags through the code which I've corrected in the below snippet.

    Secondly, the behaviour of the QR img tag was completely correct in your example and it was rendering where it should have been. In order to achieve the desired outcome, you want to put your Customer Information and Invoice Information tables inside a parent table.

    In short:

    <table>
    <tr>
        <td> <!-- Customer Information Table --> </td>
        <td> <!-- Invoice Information Table --> </td>
    </tr>
</table>

    This will allow you to but the QR img directly underneath the Invoice Information Table inside the same <td> tag.

      table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 10px auto;
  font-size: 14px;
  color: #1e2b40;
}

td,
th {
  border: 1px solid gray;
  padding: 6px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.contact-info {
  font-family: Arial, sans-serif;
  font-size: 12px;
  float: right;
  margin: 1px auto;
  font-weight: normal;
}

.contact-info ul {
  list-style-type: none;
}

.qr-code {
  clear: both;
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.srs.logo {
  width: 300px;
  height: 150px;
  margin: 10px auto;
}

.items-table {
  float: left;
  padding: 6px;
  margin: 10px auto;
  border-collapse: collapse;
  width: 100%;
}

.items-table th,
.items-table td {
  border: 1px solid gray;
  padding: 6px;
    <header>
  <!-- header content goes here -->

  <img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" />

  <div class="contact-info" style="list-style-type: none">
    <ul>
      <li>SARL RO SOLUTION</li>
      <li>RC: RC:</li>
      <li>NIF: NIF</li>
      <li>AI: AI</li>
      <li>Phone: Phone:</li>
      <li>Email: [email protected]</li>
    </ul>
  </div>

</header>

<hr style="margin-top: 100px;">

<!-- rest of the page content goes here -->

<table style="border:0; width:100%;">
  <tr>
    <td style="border:0; vertical-align:top">
      <table style="float:left;margin:0">
        <tr>
          <td colspan="2" class="center bold">Customer Information</td>
        </tr>
        <tr>
          <td>Customer Name:</td>
          <td>&lt;&lt;[Customer Name]&gt;&gt;</td>
        </tr>
        <tr>
          <td>Customer Address:</td>
          <td>&lt;&lt;[Customer Address]&gt;&gt;</td>
        </tr>
        <tr>
          <td>Customer NIF:</td>
          <td>&lt;&lt;[Customer NIF]&gt;&gt;</td>
        </tr>
        <tr>
          <td>Customer RC:</td>
          <td>&lt;&lt;[Customer RC]&gt;&gt;</td>
        </tr>
        <tr>
          <td>Customer AI:</td>
          <td>&lt;&lt;[Customer AI]&gt;&gt;</td>
        </tr>
        <tr>
          <td>Telephone:</td>
          <td>&lt;&lt;[Company AI]&gt;&gt;</td>
        </tr>
      </table>
    </td>
    <td style="border:0; vertical-align:top;text-align:right;">

      <table style="float:right;">
        <tr>
          <td colspan="2" class="center bold">Invoice Information</td>
        </tr>
        <tr>
          <td>Invoice Date:</td>
          <td>&lt;&lt;[Invoice Date]&gt;&gt;</td>
        </tr>
        <tr>
          <td>Invoice ID:</td>
          <td>&lt;&lt;[Invoice ID]&gt;&gt;</td>
        </tr>
      </table>
      <br style="clear:both;">
      <img src="<<[Invoice Date]>>" alt="qr-code">
    </td>
  </tr>
</table>





<br style="clear: both;">
<hr>


<table style="float: left;">
  <tr>
    <td rowspan="1" class="center bold">Related Sales</td>
    <td colspan="" class="center bold">Invoice Information</td>
  </tr>
</table>

<br style="clear: both;">

<hr>

<table class="items-table">
  <thead>
    <tr>
      <th>Item description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <p class="startifend">&lt;&lt;Start:[invoice_key].[Related invoice_items]&gt;&gt;</p>
    <tr>
      <td>&lt;&lt;[description]&gt;&gt;</td>
      <td>&lt;&lt;[quantity]&gt;&gt;</td>
      <td>&lt;&lt;[unit_price]&gt;&gt;</td>
      <td>&lt;&lt;[total_price]&gt;&gt;</td>
    </tr>
    <p class="startifend">&lt;&lt;End&gt;&gt;</p>
  </tbody>
</table>
<br style="clear: both;">
<hr>