“I’m engaged on creating an HTML template for an bill and am having some problem putting the QR code picture within the right location. Particularly, I need the QR code picture to seem immediately beneath the bill data desk, however it isn’t showing within the desired location. I used to be questioning in the event you may assist me modify the code to attain this. I’d actually respect any steerage or strategies you might need.
Thanks upfront in your assist!”
<!DOCTYPE html>
<html>
<head>
<fashion>
/* Add some fashion to the bill */
desk {
border-collapse: collapse ;
font-family: Arial, sans-serif;
margin: 10px auto;
font-size: 14px;
shade: #1e2b40;
}
td,
th {
border: 1px stable grey;
padding: 6px;
}
.heart {
text-align: heart;
}
.proper {
text-align: proper;
}
.daring {
font-weight: daring;
}
.contact-info {
font-family: Arial, sans-serif;
font-size: 12px;
float: proper;
margin: 1px auto;
font-weight: regular;
}
.contact-info ul {
list-style-type: none;
}
.qr-code {
clear: each;
show: block;
width: 300px;
peak: 300px;
margin: 0 auto;
}
.srs.brand {
width: 300px;
peak: 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 stable grey;
padding: 6px;
</fashion>
</head>
<physique>
<header>
<!-- header content material goes right here -->
<img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo"/>
<div class="contact-info" fashion="list-style-type: none">
<ul>
<li>SARL RO SOLUTION</li>
<li>RC: RC:</li>
<li>NIF: NIF</li>
<li>AI: AI</li>
<li>Cellphone: Cellphone:</li>
<li>E-mail: data@firm.com</li>
</ul>
</div>
</header>
<hr fashion="margin-top: 100px;">
<!-- remainder of the web page content material goes right here -->
<desk fashion="float: left;">
<tr>
<td colspan="2" class="heart daring">Buyer Info</td>
<tr>
<tr>
<td>Buyer Title:</td>
<td><<[Customer Name]>></td>
</tr>
<tr>
<td>Buyer Tackle:</td>
<td><<[Customer Address]>></td>
</tr>
<tr>
<td>Buyer NIF:</td>
<td><<[Customer NIF]>></td>
</tr>
<tr>
<td>Buyer RC:</td>
<td><<[Customer RC]>></td>
</tr>
<tr>
<td>Buyer AI:</td>
<td><<[Customer AI]>></td>
<tr>
<td>Phone:</td>
<td><<[Company AI]>></td>
</tr>
</desk>
<desk fashion="float: proper; margin: 0 auto">
<tr>
<td colspan="2" class="heart daring">Bill Info</td>
<tr>
<td>Bill Date:</td>
<td><<[Invoice Date]>></td>
<tr>
<td>Bill ID:</td>
<td><<[Invoice ID]>></td>
</tr>
</desk>
<br fashion="clear: each;">
<img src="<<[Invoice Date]>>" alt="qr-code" >
<br fashion="clear: each;">
<hr>
<desk fashion="float: left;">
<tr>
<td rowspan="1" class="heart daring">Associated Gross sales</td>
<td colspan="" class="heart daring">Bill Info</td>
</desk>
<br fashion="clear: each;">
<hr>
<desk class="items-table">
<thead>
<tr>
<th>Merchandise description</th>
<th>Amount</th>
<th>Unit Worth</th>
<th>Complete</th>
</tr>
</thead>
<tbody>
<p class="startifend"><<Begin:[invoice_key].[Related invoice_items]>></p>
<tr>
<td><<[description]>></td>
<td><<[quantity]>></td>
<td><<[unit_price]>></td>
<td><<[total_price]>></td>
</tr>
<p class="startifend"><<Finish>></p>
</tbody>
</desk>
<br fashion="clear: each;">
<hr>
</physique>
</html>
