Create an HTML Invoice

The Goal
Ever need to create a printable invoice with all of those little blocks and lines? It can be a challenge, and even more so in HTML. There is an easier way than trying to draw it though, place your data on top of an image. Essentially it works like this.

The Form
Create an exact size image. For testing you can take a screen shot of one if available, or create one using Quark or one of the other similar products that are designed for this purpose. Doing it this way provides a much nicer image. Use a PNG file format, it’s more robust than JPG.

A “span” tag is used to group HTML and can also be used to “hook” information onto that HTML. Here we will use it to enforce accurate positioning of the data elements on top of the image. An example will help.

    <form>
        <span id=”rel” style="FLOAT: left; POSITION: relative">
           <span id=”abs” style="LEFT: 28px; POSITION: absolute; TOP: 90px" >
               <td class="Data"><input size="14" name="loadInfo__pu_contact" /></td>  
           </span>
            <table>
                <tr>
                    <td>
                        <img src="images/Waybill.png" height="881" width="690" align="left" alt="Waybill.png">
                    </td>
                </tr>
            </table>
        </span>
   </form>

Notice the use of both relative and absolute positioning. Absolute positioning prints at exactly those coordinates in relation to the top left corner of the browser. The problem with this is that it can be unreliable by itself and can vary depending on the browser being used. And if you have multiple pages, it gets worse.

Relative positioning means that the coordinates are relative to something else. In the above case, the coordinates of id=”rel” are relative to the form and the coordinates of id=”abs” are relative to “rel”.