How to make Quote templates Header and Footer?

How to make Quote templates Header and Footer?

We are new to Zoho CRM. We need to implement our own quotation template. 
The issue is that our quote may extend to more than one page. We need to implement a header and footer that will show on each page when exporting to PDF or print it out. 
Here is our source code as we will really appreciate if you can help us.


<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
 
<style type="text/css" media="print">
@page {
  size: A4;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(pages);
  }
}

       
    body{background:#ffff; margin: 20px 10px 10px 20px}
        div#header {position:fixed}
      div#footer {position:fixed}
    </style>
   </head>
  <body>
<div id="header" style="text-align: justify;">
<table class="MsoTableGrid" style="width: 563.0pt; margin-left: -5.25pt; border-collapse: collapse; border: none; mso-border-bottom-alt: double windowtext 1.5pt; mso-yfti-tbllook: 1184; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-border-insideh: none; mso-border-insidev: none;" border="1" width="751" cellspacing="0" cellpadding="0">
<tbody>
<tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-yfti-lastrow: yes; height: 53.5pt;"><th style="width: 2.75in; border-style: none none double; border-bottom-color: windowtext; border-bottom-width: 1.5pt; padding: 0in 5.4pt; height: 53.5pt; text-align: left;" scope="row" valign="top" width="264">
<p class="MsoHeader"><span style="color: #0065cc;"><span style="font-family: 'times new roman', times, serif; font-size: x-large;">Naham Trading EST.</span></span></p>
<p class="MsoHeader"><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: small;">Naham Int&rsquo;l For Computer &amp; Communication</span></p>
</th>
<td style="width: 180.5pt; border: none; border-bottom: double windowtext 1.5pt; padding: 0in 5.4pt 0in 5.4pt; height: 53.5pt;" valign="top" width="241">
<p class="MsoHeader">&nbsp; &nbsp;<img style="height: 67px; width: 190px;" src=" https://crm.zoho.com/crm/viewCompanyLogo?fileId=crekr436dd9932f0943ae8da5f0d04aecd30e&amp;zgId=220104059" alt="" /></p>
</td>
<td style="width: 184.5pt; border: none; border-bottom: double windowtext 1.5pt; padding: 0in 5.4pt 0in 5.4pt; height: 53.5pt;" valign="top" width="246">
<p class="MsoHeader" dir="RTL" style="text-align: right; direction: rtl; unicode-bidi: embed;"><span lang="AR-SA"><span style="color: #0065cc;"><strong><span style="font-family: 'times new roman', times, serif; font-size: x-large;">مؤسسة النحام للتجارة</span></strong></span></span></p>
<p class="MsoHeader" dir="RTL" style="text-align: right; direction: rtl; unicode-bidi: embed;"><span lang="AR-SA"><strong><span style="color: #0065cc;"><span style="font-size: small;">النحام الدولية للكمبيوتر والاتصالات</span></span></strong></span></p>
  </td>
</tr>
</tbody>
</table>
</div>
  
  
  <h1 style="text-align: center;"><span style="color: #0065cc;"><strong><span style="font-family: 'times new roman', times, serif; font-size: 300%;">Quotation</span></strong></span></h1>

  
<table style="width: 100%; font-size: 10pt;" border=".2" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Accounts</span></strong></td>
<td style="text-align: right;">${Quotes.Account Name}</td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Subject</span></strong></td>
<td style="text-align: right;">${Quotes.Subject}</td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Date</span></strong></td>
<td style="text-align: right;">${Quotes.Created Time}</td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Quote No</span></strong></td>
<td style="text-align: right;">${Quotes.Quote Number}</td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Contact</span></strong></td>
<td style="text-align: right;"><span style="font-size: 13.3333px;">${Quotes.Contact Name}</span></td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Email</span></strong></td>
<td style="text-align: right;">${Contacts.Email}</td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Phone</span></strong></td>
<td style="text-align: right;">${Accounts.Phone}</td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Fax</span></strong></td>
<td style="text-align: right;">${Contacts.Fax}</td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Mobile</span></strong></td>
<td style="text-align: right;">${Contacts.Mobile}</td>
</tr>
</tbody>
</table>
  
<p class="MsoHeader" style="text-align: center;">&nbsp;</p>
  
<table style="width: 100%; font-size: 10pt;" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Sales Rep.&nbsp;</span></strong></td>
<td style="text-align: right;"><span style="font-size: 13px;">${Quotes.Quote Owner}</span></td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Phone</span></strong></td>
<td style="text-align: right;"><span style="font-size: 13px;">${Organization.Phone}</span></td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Mobile</span></strong></td>
<td style="text-align: right;"><span style="font-size: 13px;">${User.Mobile}</span></td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Fax</span></strong></td>
<td style="text-align: right;"><span style="font-size: 13px;">${Organization.Fax}</span></td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Email</span></strong></td>
<td style="text-align: right;"><span style="font-size: 13px;">${User.Email}</span></td>
</tr>
<tr>
<td><strong><span style="color: #0065cc; font-family: 'times new roman', times, serif; font-size: large;">Website</span></strong></td>
<td style="text-align: right;"><span style="font-size: 13px;">${Organization.Website}</span></td>
</tr>
</tbody>
</table>
  
<p class="MsoHeader" style="text-align: center;">&nbsp;</p>
  
<table style="width: 100%; font-size: 10pt;" border="1" cellspacing="2" cellpadding="2">
<thead>
<tr>
<td style="background-color: #cfe9fc;"><strong>S.NO</strong></td>
<td style="background-color: #cfe9fc;"><strong>Product Code</strong></td>
<td style="background-color: #cfe9fc;"><strong>Description</strong></td>
<td style="background-color: #cfe9fc;"><strong>Qty</strong></td>
<td style="background-color: #cfe9fc;"><strong>List Price</strong></td>
<td style="background-color: #cfe9fc;"><strong>Total</strong></td>
</tr>
 </thead>
<tbody id="lineItem">
<tr>
<td><span style="font-family: arial, helvetica, sans-serif; font-size: 11px; background-color: #ffffff;">${serialNumber}</span></td>
<td>${Quotes.Product Code}</td>
<td><span style="background-color: #ffffff;"><span style="font-size: 11px;"><strong>${Products.Product Code}</strong></span><br /></span>
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><span style="font-size: 11px; text-align: justify; background-color: #ffffff;">${Products.Description}</span></blockquote>
<span style="background-color: #ffffff;"><br /></span></td>
<td>${Quotes.Qty}</td>
<td>${Quotes.List Price}</td>
<td>${Quotes.Total}</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td>
<p>SubTotal</p>
</td>
<td><strong>${Quotes.Sub Total}</strong></td>
</tr>
<tr>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td>
<p>Discount</p>
</td>
<td><strong>${Quotes.Adjustment}</strong></td>
</tr>
<tr>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td style="border: none;">&nbsp;</td>
<td>
<p>Grand Total</p>
</td>
<td><strong>${Quotes.Grand Total}</strong></td>
</tr>
</tbody>
</table>
  
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="MsoHeader" style="text-align: center;"><strong>&nbsp; </strong>&nbsp;</p>
<p>&nbsp;</p>

<div id="footer">
  HOTLINE: 920025599 OLAYYAH – KING FAHD ROAD – AL-KHALEEJ FOR COMPUTER COMPLEX
</div>
 </body>   
 </html>