It took some time to find CSS which rendered properly in cross-browser and pdf scenearios, and I've arrived at the source below.
<html>
<head>
<style>
td.c1 {font-family:Helvetica;font-size:50px;font-weight:bolder;color:#c0c0c0;}
td.c2 {font-family:Helvetica;font-size:13px;}
td.c3 {font-family:Helvetica;font-size:12px;}
td.c4 {font-family:Helvetica;font-size:12px;border-bottom:solid 1px gray; border-left:solid 1px gray; }
td.c5 {font-family:Helvetica;font-size:12px;border-bottom:solid 1px gray; border-right:solid 1px gray; border-left:solid 1px gray}
th.h1 {font-family:Helvetica;font-size:12px;border-bottom:solid 1px gray; border-left:solid 1px gray; border-top:solid 1px gray}
th.h2 {font-family:Helvetica;font-size:12px;border-bottom:solid 1px gray; border-left:solid 1px gray; border-right:solid 1px gray; border-top:solid 1px gray}
table {margin-left:50px;margin-top:10px;margin-right:10px;}
</style>
</head>
<body>
<table width=90%>
<tr><td width=15%>
<img src="coldhot2.jpg" width=100px>
</td>
<td class=c2 valign=top><b>PickMaster</b><br>
37 Isobel Road<br>
Greenhithe<br>
Auckland<br>
0632
</td>
<td valign=top align=right class=c1>
Invoice
</td>
</tr>
</table>
<table width=90%>
<tr>
<td width=50%></td>
<td valign=top align=right class=c3>Invoice Number</td>
<td valign=top class=c3>10302</td>
</tr>
<tr>
<td width=50%></td>
<td valign=top align=right class=c3>Tax Date</td>
<td valign=top class=c3>12 Dec 2009</td>
</tr>
<tr>
<td width=50%></td>
<td valign=top align=right class=c3>Order Number</td>
<td valign=top class=c3>Customer Order Number Goes Here</td>
</tr>
</table>
<br>
<br>
<table width=60%>
<tr>
<td class=c3 width=30%>Customer Addy<br>
Address Line 1<br>
Address Line 2<br>
Address Line 3<br>
Post Code
</td>
<td class=c3 width=30%>Customer Addy<br>
Address Line 1<br>
Address Line 2<br>
Address Line 3<br>
Post Code
</td>
</tr>
</table>
<br>
<br>
<table width=90% style=" border: 0pt none black;" cellspacing=0; >
<tr>
<th valign=top class=h1 align=left width=15%>Code</th>
<th valign=top class=h1 align=left width=60%>Description</th>
<th valign=top class=h1 align=right width=15%>Qty</th>
<th valign=top class=h2 align=right width=10%>Price</th>
</tr>
<tr>
<td valign=top class=c4>ActualCode</td>
<td valign=top class=c4>Full Textual Description Description</td>
<td valign=top class=c4 align=right>14</td>
<td valign=top class=c5 align=right>23.00</td>
</tr>
<tr>
<td valign=top class=c4>ActualCode</td>
<td valign=top class=c4>Full Textual Description Description</td>
<td valign=top class=c4 align=right>14</td>
<td valign=top class=c5 align=right>23.00</td>
</tr>
<tr>
<td></td>
<td></td>
<td align=right valign=top class=c4>Total</td>
<td valign=top class=c5 align=right>23.00</td>
</tr>
<tr>
<td></td>
<td></td>
<td align=right valign=top class=c4>GST</td>
<td valign=top class=c5 align=right>2.30</td>
</tr>
<tr>
<td></td>
<td></td>
<td align=right valign=top class=c4>Total</td>
<td valign=top class=c5 align=right>25.00</td>
</tr>
</table>
</body> </html>
No comments:
Post a Comment