I've a long HTML document, when printed should include Header/Footer, Page breaks & Page numbers.
If we print preview this HTML thru IE, it will show Header/Footer, Page breaks & Page numbers.
The problems I've here are
I am unable to set the page numbers automatically(CURRENTLY HARD CODED).
The footer does not go to the bottom of every page. It starts as soon as the data ends.
<html><head >
<title>Colors</title>
<style type="text/css">
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
</style>
<body >
<table border=0 align="center" width="100%">
<thead>
<TR >
<TD colspan = 3 ><FONT face="Courier New" size=2><B>
<CENTER>Annual Report</CENTER></B></FONT></TD></TR>
<TR>
<TD colspan = 3> <HR width="100%" color=black> </TD></TR>
</thead>
<tfoot>
<TR >
<TD colspan=3> <HR width="100%" color=black> </TD></TR>
<TR>
<TD vAlign=top ><FONT face="Courier New" size=2><B>Invoicing</B></FONT></TD>
<TD align=middle><FONT face="Courier New" size=2><B>Page 1 of 3</B></FONT></TD>
<TD vAlign=top align=right><FONT face="Courier New" size=2><B> 5/5/2003</B></FONT></TD></TR>
</tfoot>
<tbody>
<tr>
<td colspan=3>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="FONT-SIZE: x-small; PAGE-BREAK-AFTER: always; WIDTH: 619px; FONT-FAMILY: sans-serif"
width=75 bgcolor=moccasin>
<TR vAlign=top> <TD> Colors</TD>
<TR vAlign=top> <TD>Red</TD>
<TR vAlign=top> <TD> Green</TD>
<TR vAlign=top> <TD>Blue</TD>
<TR vAlign=top> <TD> White</TD>
<TR vAlign=top> <TD>Cyan</TD>
<TR vAlign=top> <TD> Brown</TD>
<TR vAlign=top> <TD>Black</TD>
<TR vAlign=top> <TD> Orange</TD>
</TABLE>
</td></tr>
<td colspan=3>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="FONT-SIZE: x-small; PAGE-BREAK-AFTER: always; WIDTH: 619px; FONT-FAMILY: sans-serif"
width=75 bgcolor=moccasin>
<TR vAlign=top> <TD> Colors</TD>
<TR vAlign=top> <TD>Red</TD>
<TR vAlign=top> <TD> Green</TD>
<TR vAlign=top> <TD>Blue</TD>
<TR vAlign=top> <TD> White</TD>
<TR vAlign=top> <TD>Cyan</TD>
<TR vAlign=top> <TD> Brown</TD>
<TR vAlign=top> <TD>Black</TD>
<TR vAlign=top> <TD> Orange</TD>
</TABLE>
</td></tr>
<td colspan=3>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="FONT-SIZE: x-small; PAGE-BREAK-AFTER: always; WIDTH: 619px; FONT-FAMILY: sans-serif"
width=75 bgcolor=moccasin>
<TR vAlign=top> <TD> Colors</TD>
<TR vAlign=top> <TD>Red</TD>
<TR vAlign=top> <TD> Green</TD>
<TR vAlign=top> <TD>Blue</TD>
<TR vAlign=top> <TD> White</TD>
<TR vAlign=top> <TD>Cyan</TD>
<TR vAlign=top> <TD> Brown</TD>
<TR vAlign=top> <TD>Black</TD>
<TR vAlign=top> <TD> Orange</TD>
</TABLE>
</td></tr>
</tbody>
</table> </body></html>
If we print preview this HTML thru IE, it will show Header/Footer, Page breaks & Page numbers.
The problems I've here are
I am unable to set the page numbers automatically(CURRENTLY HARD CODED).
The footer does not go to the bottom of every page. It starts as soon as the data ends.
<html><head >
<title>Colors</title>
<style type="text/css">
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
</style>
<body >
<table border=0 align="center" width="100%">
<thead>
<TR >
<TD colspan = 3 ><FONT face="Courier New" size=2><B>
<CENTER>Annual Report</CENTER></B></FONT></TD></TR>
<TR>
<TD colspan = 3> <HR width="100%" color=black> </TD></TR>
</thead>
<tfoot>
<TR >
<TD colspan=3> <HR width="100%" color=black> </TD></TR>
<TR>
<TD vAlign=top ><FONT face="Courier New" size=2><B>Invoicing</B></FONT></TD>
<TD align=middle><FONT face="Courier New" size=2><B>Page 1 of 3</B></FONT></TD>
<TD vAlign=top align=right><FONT face="Courier New" size=2><B> 5/5/2003</B></FONT></TD></TR>
</tfoot>
<tbody>
<tr>
<td colspan=3>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="FONT-SIZE: x-small; PAGE-BREAK-AFTER: always; WIDTH: 619px; FONT-FAMILY: sans-serif"
width=75 bgcolor=moccasin>
<TR vAlign=top> <TD> Colors</TD>
<TR vAlign=top> <TD>Red</TD>
<TR vAlign=top> <TD> Green</TD>
<TR vAlign=top> <TD>Blue</TD>
<TR vAlign=top> <TD> White</TD>
<TR vAlign=top> <TD>Cyan</TD>
<TR vAlign=top> <TD> Brown</TD>
<TR vAlign=top> <TD>Black</TD>
<TR vAlign=top> <TD> Orange</TD>
</TABLE>
</td></tr>
<td colspan=3>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="FONT-SIZE: x-small; PAGE-BREAK-AFTER: always; WIDTH: 619px; FONT-FAMILY: sans-serif"
width=75 bgcolor=moccasin>
<TR vAlign=top> <TD> Colors</TD>
<TR vAlign=top> <TD>Red</TD>
<TR vAlign=top> <TD> Green</TD>
<TR vAlign=top> <TD>Blue</TD>
<TR vAlign=top> <TD> White</TD>
<TR vAlign=top> <TD>Cyan</TD>
<TR vAlign=top> <TD> Brown</TD>
<TR vAlign=top> <TD>Black</TD>
<TR vAlign=top> <TD> Orange</TD>
</TABLE>
</td></tr>
<td colspan=3>
<TABLE border=0 cellPadding=1 cellSpacing=1 style="FONT-SIZE: x-small; PAGE-BREAK-AFTER: always; WIDTH: 619px; FONT-FAMILY: sans-serif"
width=75 bgcolor=moccasin>
<TR vAlign=top> <TD> Colors</TD>
<TR vAlign=top> <TD>Red</TD>
<TR vAlign=top> <TD> Green</TD>
<TR vAlign=top> <TD>Blue</TD>
<TR vAlign=top> <TD> White</TD>
<TR vAlign=top> <TD>Cyan</TD>
<TR vAlign=top> <TD> Brown</TD>
<TR vAlign=top> <TD>Black</TD>
<TR vAlign=top> <TD> Orange</TD>
</TABLE>
</td></tr>
</tbody>
</table> </body></html>