HTML & CSS: header and footer elements for printing

Tweet

In July this year, I've posted an article about collecting data from an xml file in order to display it and eventually print it [JavaScript: get data from an xml file (like a Blogger backup file) and display it (or print it)]. The main reason why I wrote that post is because I wanted to create a unique way of printing The Web Thought. I managed to collect the data (articles body, datestamps, titles and so on) from the xml file generated by Blogger as blog backup, so I now have a good page ready for printing.

Since then, I've worked again on the file and I've changed it a bit, just to include some specific features I needed. Basically I've changed the css style and the JavaScript code. I don't think you might be interested in that part (if you are please let me know so that I can share it), however there's a bit of code I would like to show you. Basically we want to create footers and headers for every printed page.

What was the problem?

The problem that I kept thinking about, was that I needed to create an header and a footer for all the pages. That is not a real problem if you need to do it for a web page (I explained the way to do it in another post), but we are talking about creating headers and footers for printing.

If we create for example a footer using a CSS style that gives it a fixed position, we can see our footer staying at the bottom of our page, as we wanted. However if our content (for example the text of our article) flows over a new page, the text will overlap the footer. That is a problem... well actually two problems.

Two problems actually
First of all, the content of the footer will be unreadable, as well as the overflowing text. Secondly, there will be no margin at the bottom of the page.

While the normal flow of elements, in a web page, is easily controllable, when we insert forced page breaks, or we leave the browser to do the dirt job of creating page breaks, we really need to take control of top and bottom margins, and headers and footers repeated on every page.

The solution

The solution is quite simple, and it involves the use of tables. We basically need to create 3 tables as follows.
First we create a table head, so that it will be repeated on every page

<table border="0" width="100%">
   <thead>
    <tr>
     <th style="width:100%">page header</th>
   </tr>
   <tr>
    <th><hr style="color:#000080"/></th>
   </tr>
  </thead> 

Then we create the table foot. This will be blank (we add a  ) so that the main content will not appear on it.

  <tfoot>
   <tr>
    <td width="100%">
     <table width="100%" border="0">
       <tr>
         <td colspan="4"><br>&nbsp;</td>
      </tr>
    </table>
  </tfoot>

Then we insert the main part:

  <tbody>
    <tr>
      <td width="100%">
         put your text (for example article main body, title etc...)
      </td>
   </tr>
 </tbody>
</table>

Now add the footer. This is what will appear on every page. This footer will appear only on printed media (see the CSS style):

<table id="footer" width="100%">
  <tr>
    <td width="100%">
      footer text
    </td>
  </tr>
</table>

And that's it. Now we need the styles.

The CSS

I include here only the CSS style needed for the footer (which has an id set to "footer").

@media print
{
    #footer {
         display: block;
         position: fixed;
         bottom: 0;
    }
}

Now, we can decide the style for all the other elements (and I leave that to your fantasy!).

Conclusion
The above solution works very well, and creates headers and footers on every printed page. That is very useful when we want to show printable content with a decent content flow.

Let me know if you need more help and if you've found the solution helpful.