Printing a web page that represents a report has been difficult for me in the past.  I want to print a header and/or a footer that repeats on every printed page.  The screen version certainly isn't paginated, so how can you print a good looking report?  Style (or CSS) to the rescue. 

Put the following Style tag, or something similar, in the header of the page.

<STYLE TYPE=”text/css” MEDIA=”screen, print”>
<!--
TABLE {
  table-layout: fixed;
  border: 0;
  cellspacing: 1;
  cellpadding: 1;
  font-family: Arial;
  font-size: 8pt;
  }
TH {
  font-family: Arial;
  color: black;
  background-color: lightgrey;
  text-decoration: underline;
  }
THEAD {
  display: table-header-group;
  }
TFOOT {
  display: table-footer-group;
  }
-->
</STYLE>

Since nearly every report uses an HTML Table, this works very well.  The THEAD and TFOOT styles is what makes the table a report.  If you don't want to setup a style tag, you can enter the style right into the table.

<table style="table-layout:fixed">
    <colgroup>
        <col width="150"/>
        <col width="100"/>
        <col width="150"/>
    </colgroup>
    <thead style="display:table-header-group">
        <tr>
            <td>Header column 1</td>
            <td>Header column 2</td>
            <td>Header column 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Body column 1</td>
            <td>Body column 2</td>
            <td>Body column 3</td>
        </tr>
    </tbody>
    <tfoot style="display:table-footer-group">
        <tr>
            <td>Footer column 1</td>
            <td>Footer column 2</td>
            <td>Footer column 3</td>
        </tr>
    </tfoot>
</table>
 
Sounds too easy to be true but it works very nicely.  Of course, adding more style (bolding, underlining, background and foreground colors, etc.) makes this a very nice reporting option.

***Originally posted on DotNetJunkies on February 16, 2005