

Hello friend today in this artical we will learn how to Create inline css html templates.
Why we use inline css in invoice
when we use external css in invoice then in print css will not work, So when we use inline css then css will work in print view .
<table style="box-sizing:border-box; border:1px solid #c8c8c8;" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="100" colspan="2" align="center"><img src="logo.jpg" width="219" height="60" /> <hr /> </td> </tr> <tr> <td height="31" colspan="2" style="padding-left:10px; font-size:20px; font-family:Verdana, Geneva, sans-serif;"><strong>INVOICE</strong></td> </tr> <tr> <td width="61%" height="28"><table style="box-sizing:border-box; border:1px solid #c8c8c8; margin:10px;" width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" height="25" style="padding-left:10px; font-family:Verdana, Geneva, sans-serif; border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; font-size:14px;"><strong>Name </strong></td> <td width="75%" style="padding-left:10px; font-family:Verdana, Geneva, sans-serif; border-bottom:1px solid #c8c8c8; font-size:14px;">Demo Name</td> </tr> <tr> <td height="25" style="padding-left:10px; font-family:Verdana, Geneva, sans-serif; border-right:1px solid #c8c8c8; font-size:14px;"><strong>Address</strong></td> <td style="padding-left:10px; font-family:Verdana, Geneva, sans-serif; font-size:14px;">Lucknow, India</td> </tr> <tr> <td height="25" style="padding-left:10px; font-family:Verdana, Geneva, sans-serif; border-right:1px solid #c8c8c8; border-top:1px solid #c8c8c8; font-size:14px;"><strong>Mobile</strong></td> <td style="padding-left:10px; font-family:Verdana, Geneva, sans-serif; border-top:1px solid #c8c8c8; font-size:14px;">+91-88888888888</td> </tr> </table></td> <td width="39%" align="right"><table style="box-sizing:border-box; border:1px solid #c8c8c8; margin:10px;" width="80%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="25" align="right" style="padding-right:10px; font-family:Verdana, Geneva, sans-serif; border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; font-size:14px;"><strong>Order ID</strong> : #3DRT567</td> </tr> <tr> <td height="25" align="right" style="padding-right:10px; font-family:Verdana, Geneva, sans-serif; border-right:1px solid #c8c8c8; font-size:14px;"><strong>Reciept No</strong> : #5674DFTRG</td> </tr> </table></td> </tr> <tr> <td height="28" colspan="2"> </td> </tr> <tr> <td style="padding:10px;" height="28" colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="13%" height="28" align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-left:#c8c8c8 1px solid; border-top:#c8c8c8 1px solid; font-family:Verdana, Geneva, sans-serif; font-size:13px;"><strong>S.N</strong></td> <td width="22%" align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-top:#c8c8c8 1px solid; font-family:Verdana, Geneva, sans-serif; font-size:13px;"><strong>DESCRIPTION </strong></td> <td width="26%" align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-top:#c8c8c8 1px solid; font-family:Verdana, Geneva, sans-serif; font-size:13px;"><strong>AMOUNT</strong></td> <td width="20%" align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-top:#c8c8c8 1px solid; font-family:Verdana, Geneva, sans-serif; font-size:13px;"><strong>QUATITY</strong></td> <td width="19%" align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-top:#c8c8c8 1px solid; font-family:Verdana, Geneva, sans-serif; font-size:13px;"><strong>TOTAL AMOUNT</strong></td> </tr> <tr> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-left:#c8c8c8 1px solid" height="28" align="center">1</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">Domain</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">500</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">1</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">500</td> </tr> <tr> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-left:#c8c8c8 1px solid" height="28" align="center">2</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">Hosting </td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">1500</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">1</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">1500</td> </tr> <tr> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-left:#c8c8c8 1px solid" height="28" align="center">3</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">Designing</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">4000</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">1</td> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;" align="center">4000</td> </tr> </table> </td> </tr> <tr> <td style="padding:10px;" height="28"> </td> <td style="padding:10px;" height="28"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-top:1px solid #c8c8c8; border-left:1px solid #c8c8c8; font-family:Verdana, Geneva, sans-serif; font-size:13px; padding-left:10px;" width="51%" height="29"><strong>Total Amount</strong></td> <td width="49%" align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-top:1px solid #c8c8c8;">6000</td> </tr> <tr> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-left:1px solid #c8c8c8; font-family:Verdana, Geneva, sans-serif; font-size:13px; padding-left:10px;" height="29"><strong>GST </strong></td> <td align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;">200</td> </tr> <tr> <td style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8; border-left:1px solid #c8c8c8; font-family:Verdana, Geneva, sans-serif; font-size:13px; padding-left:10px;" height="29"><strong>Total Amount</strong></td> <td align="center" style="border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;">6200</td> </tr> </table></td> </tr> <tr> <td height="28" colspan="2"> </td> </tr> <tr> <td style="font-family:Verdana, Geneva, sans-serif; font-size:13px;" height="28" colspan="2" align="center"> <strong>Company Name</strong> <br> ABC AREA <br> Tel: +00 000 000 0000 | Email: info@companyname.com <br> Company Registered in Country Name. Company Reg. 12121212. <br> VAT Registration No. 021021021 | ATOL No. 1234 </td> </tr> <tr> <td height="28" colspan="2"> </td> </tr> </table>
Leave a Reply