rboersma
Here you are
<table style="border-spacing: 0; border-collapse: collapse; color: #666; font-size: 14px; font-family: Arial, sans-serif; width: 850px; margin: 0 auto;">
<tbody>
<tr>
<td style="padding-bottom: 30px;">[LOGO]</td>
<td style="text-align: right; padding-bottom: 30px;">
<h2 style="text-transform: uppercase;">Invoice</h2>
</td>
</tr>
<tr>
<td style="padding: 10px;">
<h3 style="margin: 0;">Bill from</h3>
[SITENAME]<br /> [CADDRESS]<br /> [CCITY] [CSTATE] [CZIP]<br /> E-mail:[CEMAIL]<br /> Phone:[CPHONE]</td>
</tr>
<tr>
<td style="line-height: 1.6; font-size: 15px; font-weight: 400; color: #333; width: 50%;">
<h3 style="margin: 0;">Bill to</h3>
[ORGANISATION]<br /> [NAME]<br /> [ADDRESS]<br /> [CITY] [STATE] [ZIP]<br /> E-mail:[EMAIL]<br /> Phone:[CONTACT_NUMBER]</td>
<td>
<table style="font-size: 15px; font-weight: 400; color: #333; width: 100%;">
<tbody>
<tr>
<td style="text-align: right; padding: 7px 15px 7px 0; width: 50%;">Invoice#</td>
<td>[INVOICE_NUMBER]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Invoice Date</td>
<td>[DATE]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Due Date</td>
<td>[DUE_DATE]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Terms</td>
<td>[TERMS]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">VAT / TaxId</td>
<td>[VAT_OR_TAXID]</td>
</tr>
<tr>
<td style="text-align: right; padding: 3px 15px 3px 0; width: 50%;">Amount Due</td>
<td>[DUE_AMOUNT]</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table style="border-collapse: collapse; border-spacing: 0; margin-top: 20px; width: 100%;">
<tbody>
<tr style="border: 1px solid #ddd; color: #555; font-size: 15px; font-weight: 600;">
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 40%;">Description</th>
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 20%;">Quantity</th>
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 20%;">Unit Price</th>
<th style="background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 10px; width: 20%;">Amount</th>
</tr>
<!--{PRODUCT_BLOCKS}-->
<tr style="font-size: 15px;">
<td style="border: 1px solid #ddd; padding: 8px 10px;">[PRODUCT_NAME]</td>
<td style="border: 1px solid #ddd; padding: 8px 10px;">[PRODUCT_QUANTITY]</td>
<td style="border: 1px solid #ddd; padding: 8px 10px; text-align: right;">[PRODUCT_PRICE]</td>
<td style="border: 1px solid #ddd; padding: 8px 10px; text-align: right;">[PRODUCT_TOTAL]</td>
</tr>
<!--{/PRODUCT_BLOCKS}-->
<tr>
<td style="padding: 7px 10px;"> </td>
<td style="padding: 7px 10px;"> </td>
<td style="padding: 7px 10px; text-align: right;">Paid</td>
<td style="padding: 7px 10px; text-align: right;">[AMOUNT]</td>
</tr>
<tr>
<td colspan="4"><hr /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td style="padding: 10px; width: 50%; text-align: right;">Amount Due</td>
<td style="padding: 10px; width: 50%; text-align: right;">[DUE_AMOUNT]</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td style="padding: 0 0 20px;" colspan="2">
<table style="border-spacing: 0; border-collapse: collapse; border: 1px solid #ddd; width: 100%;">
<tbody>
<tr>
<td style="background-color: #f0f0f0; border: 1px solid #ddd; font-size: 15px; padding: 8px 10px; width: 50%; text-align: right;"><strong>Total</strong></td>
<td style="border: 1px solid #ddd; font-size: 15px; padding: 8px 10px; width: 50%; text-align: right;"><strong>[TOTAL]</strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="border-top: 1px solid #ddd; padding: 20px 10px 20px 0;" colspan="2"><strong>Notes:</strong>
<p style="display: inline-block; font-style: italic; padding-left: 10px;">[NOTE]</p>
</td>
</tr>
</tbody>
</table>
I suggest you disable default editor in Global Configuration in backend first, then put this code into invoice section.
