control print layout with CSS.(fucking good...)

In general, a report desgined by html requests a header & a footer for each printed page is a complex job, but don't worry about, here I will describe a good method to achieve it.
codes put on below:

===========================================================
<style>
@media print{
INPUT {display:none}
}
</style>
<TABLE border="0" style="font-size:9pt;" width="500px" align="center" ID="Table1">
 <THEAD style="display:table-header-group;font-weight:bold">
  <TR>
   <TD colspan="2" align="center" style="font-weight:bold;border:3px double red">page
    header</TD>
  </TR>
 </THEAD>
 <TBODY style="text-align:center"">
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR style="page-break-after:always;">
   <TD>Table2 contents</TD>
   <TD>Table 2contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR style="page-break-after:always;">
   <TD>Table contents</TD>
   <TD>Table3 contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR>
   <TD>Table contents</TD>
   <TD>Table contents</TD>
  </TR>
  <TR style="page-break-after:always;">
   <TD>Table4 contents</TD>
   <TD>Table contents</TD>
  </TR>
 </TBODY>
 <TFOOT style="display:table-footer-group;font-weight:bold">
  <TR>
   <TD colspan="2" align="center" style="font-weight:bold;border:3px double blue">page
    footer</TD>
  </TR>
 </TFOOT>
</TABLE>
<input type="button" value=" 打  印 " onclick="window.print()" ID="Button1" NAME="Button1">