Many web pages are not designed with any consideration for printing - this is one of those annoying things that one comes across more often than not.
Here are a couple of simple ways to make sure your pages are printed in a formatted way:
- Use a specific print style sheet.
This is the most common approach used on the web. The idea being you create another stylesheet that is specifically for formatting your web page(s) for printer output.
There are many examples on the web of how to do CSS so I won't go into that. However what you may need to know, is how to specify an printer specific stylesheet within your page.
A normal stylesheet is added like this:
<link href="default.css" type="text/css" rel="stylesheet">
where as a print specific stylesheet is added like this:
<link href="print.css" type="text/css" rel="stylesheet" media="print">
By adding this to your web page, whenever the user click on the Print button the page will be formated using the print stylesheet.
- Use an alternative document.
This is a less known method, which can be very effective. Basically it tells your browser to use an alternative document whenever the user clicks on Print. This alternative document can be any web resource eg another web page or something like a word document, spreadsheet or pdf document. What's good about this that things like word or pdf documents are very quick and easy to create and format - so you know what it's going to look like printed right away (I find it way easier to create and format a word doc than fiddling with stylesheets).
This is how to specify the alternate print document:
<link href="worddoc.doc" type="application/msword" rel="alternate" media="print">
Note that you should specify the correct content type.
HTH
Tim