"Basic HTML Invoice"
Bootstrap 3.2.0 Snippet by ricardoard12

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div bgcolor='#e4e4e4' text='#ff6633' link='#666666' vlink='#666666' alink='#ff6633' style='margin:0;font-family:Arial,Helvetica,sans-serif;border-bottom:1'> <table background='' bgcolor='#e4e4e4' width='100%' style='padding:20px 0 20px 0' cellspacing='0' border='0' align='center' cellpadding='0'> <tbody> <tr> <td> <table width='620' border='0' align='center' cellpadding='0' cellspacing='0' bgcolor='#FFFFFF' style='border-radius: 5px;'> <tbody> <tr> <td> <table width='620' border='0' cellspacing='0' cellpadding='0' style='border-bottom:solid 1px #e5e5e5'> <tbody> <tr> <td align='left' valign='top' style='padding:0px 5px 0px 5px' > <table height='20px' width='100%' border='0' cellpadding='0' cellspacing='0'> <tbody> <tr> <td height='10px' valign='top' style='color:#404041;font-size:13px;padding:5px 5px 0px 20px'> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:13px;padding:5px 5px 0px 20px'> <strong>Order number:</strong> 12345 </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:13px;padding:5px 5px 0px 20px'> <strong>Date:</strong> 25 August 2014 </td> </tr> </tbody> </table> </td> <td align='left' valign='top' style='padding:0px 5px 0px 5px'> <table height='146' width='100%' border='0' cellpadding='3' cellspacing='3' style='border-right:solid 1px #e5e5e5'> <tbody> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:15px 5px 0px 5px'> <strong>Company Address:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> 21 Random street<br> Random Area<br> Random Town<br> 1234<br> </p> </td> </tr> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:0px 5px 0px 5px'> <strong>Tel:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> <a href='tel:061%937%0266%' value='+27619370266' target='_blank'>123 456 7891</a><br> </p> </td> </tr> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:0px 5px 0px 5px'> <strong>Email:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> <a href='mailto:info@preview.co.za'>info@preview.com</a><br> </p> </td> </tr> </tbody> </table> </td> <td align='left' valign='top' style='padding:0px 5px 0px 5px'> <table height='146' width='100%' border='0' cellpadding='3' cellspacing='3' > <tbody> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:15px 5px 0px 5px'> <strong>Order by:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;padding:0px 5px 0px 5px'> <p> Customer Name<br> <br> </p> </td> </tr> </tbody> </table> </td> <td align='left' valign='top' style='padding:0px 5px 0px 0px'> <table height='140' width='100%' border='0' cellpadding='3' cellspacing='3'> <tbody> <tr> <td height='16' valign='top' style='color:#404041;font-size:13px;padding:15px 5px 0px 5px'> <strong>Deliver to:</strong> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:0px 5px 0px 5px'> <p> Customer Street<br> Customer Area<br> Customer Town<br> 1234<br> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td valign='top' style='color:#404041;line-height:16px;padding:25px 20px 0px 20px'> <p> <section style='position: relative;clear: both;margin: 5px 0;height: 1px;border-top: 1px solid #cbcbcb;margin-bottom: 25px;margin-top: 10px;text-align: center;'> <h3 align='center' style='margin-top: -12px;background-color: #FFF;clear: both;width: 180px;margin-right: auto;margin-left: auto;padding-left: 15px;padding-right: 15px; font-family: arial,sans-serif;'> <span>TAX INVOICE</span> </h3> </section> </p> </td> </tr> <tr> <td valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:25px 20px 0px 20px'> <p> <span><h2 style='color: #848484; font-family: arial,sans-serif; font-weight: 200;'>Hello from Company,</h2></span> </p> <p> Thanks for shopping at <a href='company.com<' target='_blank'>company.com</a>.<br> <br>We have received your order and we will notify you as soon as we have received your payment. </p> </td> </tr> <tr> <td style='color:#404041;font-size:12px;line-height:16px;padding:10px 16px 20px 18px'> <table width='100%' border='0' cellpadding='0' cellspacing='0' style='border-radius:5px;border:solid 1px #e5e5e5'> <tbody> <tr> <td> <table width='570' border='0' cellspacing='0' cellpadding='0'> <tbody> <tr> <td width='15'>  </td> <td colspan='5' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 10px 3px 5px;border-bottom:solid 1px #e5e5e5'> <strong>Product</strong> </td> <td width='85' align='right' style='color:#404041;font-size:12px;line-height:16px;padding:5px 10px 3px 5px;border-bottom:solid 1px #e5e5e5'> <strong>Quantity</strong> </td> <td width='60' align='right' style='color:#404041;font-size:12px;line-height:16px;padding:5px 10px 3px 5px;border-bottom:solid 1px #e5e5e5'> <strong>Total</strong> </td> </tr> <tr> <td width='15'>  </td> <td colspan='5' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:dashed 1px #e5e5e5'> Samsung SL-C410W Colour Laser Printer </td> <td width='85' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:dashed 1px #e5e5e5'> 1 </td> <td width='60' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:dashed 1px #e5e5e5'> $1,234.00 </td> </tr> <tr> <td width='15'>  </td> <td width='100' align='left' valign='top' style='color:#404041;font-size:12px;padding:10px 0px 0px 5px'> <strong>Seller:</strong> </td> <td colspan='4' align='left' valign='top' width='115' style='color:#ff6600;font-size:12px;padding:10px 5px 0px 5px'> <a href='http://company.com' target='_blank'>company.com</a> </td> </tr> <tr> <td width='15'>  </td> <td width='100' align='left' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 0px 5px'> <strong>Delivery method:</strong> </td> <td colspan='4' align='left' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 0px 5px'> Courier </td> </tr> <tr> <td width='15'>  </td> <td width='100' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 5px 5px'> <strong>Delivery time:</strong> </td> <td colspan='4' align='left' valign='top' style='color:#404041;font-size:12px;padding:5px 5px 5px 5px'> 1 - 2 Working Days </td> <td width='85' align='right'>  </td> <td width='60' align='right'>  </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr align='left' > <td style='color:#404041;font-size:12px;line-height:16px;padding:10px 16px 20px 18px'> <table width='0' border='0' align='left' cellpadding='0' cellspacing='0'> <span><h2 style='color: #848484; font-family: arial,sans-serif; font-weight: 200;'>Banking Details</h2></span> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:0px 0px 3px 0px'> <strong>Bank:</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:0px 5px 3px 5px'> Bank 1 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Account Number:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> 123456789 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Branch:</strong> </td> <td width='120' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> Bank Area </td> </tr> </tbody> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>Bank:</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> Bank 2 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Account Number:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> 123456789 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Branch:</strong> </td> <td width='120' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> Bank Branch </td> </tr> </tbody> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>Bank:</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> Bank 3 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Account Number:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> 123456789 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;'> <strong>Branch:</strong> </td> <td width='120' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;'> Bank Branch </td> </tr> </tbody> </table> <table width='0' border='0' align='right' cellpadding='0' cellspacing='0'> <tbody> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>VAT</strong> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> $123.00 </td> </tr> <tr> <td width='0' align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 0px 3px 0px'> <strong>Sub-total:</strong> <span style='font-size:11px;color:#666666'>(VAT included)</span> </td> <td width='0' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 3px 5px'> $1,234.00 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px'> <strong>Delivery costs:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px'> $0.00 </td> </tr> <tr> <td align='left' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 0px 3px 0px;border-bottom:solid 1px #999999'> <strong>Order discount:</strong> </td> <td width='62' align='right' valign='top' style='color:#404041;font-size:12px;line-height:16px;padding:5px 5px 3px 5px;border-bottom:solid 1px #999999'> $0.00 </td> </tr> <tr> <td align='left' valign='bottom' style='color:#404041;font-size:13px;line-height:16px;padding:5px 0px 3px 0px'> <strong>Grand Total:</strong> </td> <td width='62' align='right' valign='bottom' style='color:#339933;font-size:13px;line-height:16px;padding:5px 5px 3px 5px'> <strong>$1,234.00</strong> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table width='550' border='0' cellspacing='0' cellpadding='0'> <tbody> <tr> <td style='color:#404041;font-size:12px;line-height:16px;padding:15px 5px 5px 10px'> For more information on your order please call us on<strong> <a href='tel:123 467 8961' value='+123 467 8961' target='_blank'>123 467 8961</a></strong>, or mail us at <a href='mailto:orders@company.com'>orders@company.com</a> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table width='510' border='0' cellspacing='0' cellpadding='0'> <tbody> <tr> <td style='color:#404041;font-size:12px;line-height:16px;padding:5px 15px 10px 10px'> <p> Kind regards,<br> <strong>The <a href='#' target='_blank'>company.com</a> team</strong> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>

Related: See More


Questions / Comments: