Reporting with HTML. Who Needs Expensive Reporting Tools?
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.