Terminally Incoherent

Here is a neat HTML trick for printing HTML tables that most people don’t know about. Btw, designing your page to print well, is actually a joyless task full of insurmountable obstacles such as lack of any page break support in modern browsers. For example, how do you explain to your pointy haired manager that page break support is still pretty much badly broken in most modern browsers? It is usually is met with disbelief and questioning of your skills as a web monkey.

“Microsoft releasing a half assed product? I find that hard to believe, sir!”

Yeah, every time I hear that sentence uttered in a serious, self righteous tone without even a hint of irony I must fight to keep my face straight.

Anyways, if you do need to print HTML tables here is a little hint. You know how a table will usually have headings on the first page, and then no heading on subsequent ones, forcing you to flip back and forward to see which column is what? Well, you can actually make most browsers to repeat your headings on each printed page using the method below.

First, you have to explicitly define the table head and table body:

<table>
   <thead>
      <tr>
         <th>First Heading</th>
         <th>Second Heading</th>
         <th>Third Heading</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>foo</td>
         <td>bar</td>
         <td>baz</td>
      </tr>
 
      . . .
 
      <tr>
         <td>fim</td>
         <td>fam</td>
         <td>fom</td>
      </tr>
   </tbody>
</table>

Yeah, I know that most browsers can do this automatically, but if you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:

@media print {
   thead {display: table-header-group;}
}

That’s it. This will force most browsers to repeat the contents of thead node on every printed page. Having discovered this myself somewhat recently, I keep being amazed how many online applications don’t actually do this. Even commercial web suites whose only purpose is to generate long HTML reports often fail to implement this properly. As a consolation they offer you features that will export the reports to PDF or Excel formats, but they never even try to make the HTML version more accessible.

This entry was posted on Monday, October 12th, 2009 at 10:44 am and is filed under technology, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Related Posts: