Home » CSS TRICKS » HTML inline css invoice template

HTML inline css invoice template

Posted on: November 25, 2020 | By: sandeepchhn – Leave a Comment

simple html invoice template free

simple html invoice template free

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>

About The Author

sandeepchhn

Hello Friend, My Name is Sandeep Chauhan, I am the owner of SCHAUHAN.IN. I Have Passed B.Sc(IT) from Shobhit Univercity Uttar Pradesh, and i have the Diploma of Arena Animation, I Leave in Varanasi Uttar Pradesh.

Leave a Reply

Subscribe