Correctly positioning a QR code image in an HTML invoice template-CodePudding

"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  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" >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" >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" >Related Sales</td>
    <td colspan="" >Invoice Information</td>
</table>

<br style="clear: both;">

<hr>

<table >


  <thead>
    <tr>
      <th>Item description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <p >&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 >&lt;&lt;End&gt;&gt;</p>
  </tbody>
</table>
<br style="clear: both;">
<hr>

CodePudding user response：

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  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" >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" >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" >Related Sales</td>
    <td colspan="" >Invoice Information</td>
  </tr>
</table>

<br style="clear: both;">

<hr>

<table >
  <thead>
    <tr>
      <th>Item description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <p >&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 >&lt;&lt;End&gt;&gt;</p>
  </tbody>
</table>
<br style="clear: both;">
<hr>

CodePudding user response：

This should do the trick, added a container to the tables and applied flex box. Remove the margin from the table selector, if you want the tables to go to the left and right edges.

<div style="display:flex;justify-content:space-between;">
<table>
  <tr>
    <td colspan="2" >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>
  <tr>
    <td colspan="2" >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>

</div>

<img style="float:right;" src="<<[Invoice Date]>>" alt="qr-code">