Решение нам дает CSS: можно назначить таблицы стилей отдельно для различных типов устройств! По умолчанию таблица стилей назначается для all – для всех устройств одна. Нас интересует два варианта – для вывода на экран в браузере и принтера.

Задать это можно так:

@media screen { body { font-family: verdana, sans-serif; font-size: 1em; } ..другие стили для дисплея.. } @media print { body { font-family: times, serif; font-size: 12pt; } .. другие стили для принтера.. }

Это для тэга <style>

Если Вы хотите подгружать файл со стилем, то так:

<link href="styles.css" media="screen" rel="stylesheet" type="text/css"> <link href="stylep.css" media="print" rel="stylesheet" type="text/css">

Ну а если хотите импортировать стиль внутри тэга <style>, то так:

<style type="text/css"> @import url("stylep.css") print; body { font-family: verdana, sans-serif; font-size: 1em; } </style>

В дополнение к этому, ту часть таблицы стиля, которая используется и в версии для печати и на сайте можно выделить в один общий блок, который можно подгрузить так:

<link href="stylea.css" media="all" rel="stylesheet" type="text/css">

или так:

@media screen, print { body { font-decoration: none; } ..other style sheet rules for both.. }

Теперь нам остается назначить классы тем элементам, которые печатаются некорректно или вовсе не нужны при печати, записать два (или три) стиля и сделать ссылку на версию для печати:

<a href=javascript:window.print()> </a>

В принципе, ссылку можно и не ставить. Все!

Некоторые замечания:
Ширина поля для печати 450 пикселей, соответственно, если все содержимое страницы заключено в таблицу, то задаем ей класс (или id) и пишем в версии для печати: width: 450px;
Те элементы страницы, которые не нужны при печати (например, меню) можно скрыть, назначив им: display: none;