This is one article in a series of articles about Print Templates.
Print Templates allow you to create your own templates for printing. Your BookingCentral account already comes with an invoice print template defined. You can add more print templates if needed.
This article will give you a brief introduction on how to use tables for better layout.
The Table
The table is an HTML tag that allows you to create a grid layout. Grid layouts are very common for invoices and reports where you need multiple rows and columns.
At the most basic level, a table consists of one or more rows with each row have one or more columns. The HTML tags are <table></table> for the table itself, <tr></tr> for the row and <td></td> for each cell.
A basic table with 2 rows and 2 columns will look like this
<table>
<tr
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tr>
</table>
Let’s create a table to show our invoice lines. We want 6 columns; description (product), date/time, number of persons, quantity and price.
First we define the headers:
<table>
<th>
<td>Description</td>
<td>Date / Time</td>
<td>Persons</td>
<td>Quantity</td>
<td>Price</td>
<td>Total</td>
</th>
And then we define the loop to show each of the order lines
#foreach($orderline in $orderlines)
<tr>
<td>${orderline.description}</td>
<td>${orderline.datetime}</td>
<td>${orderline.nopersons}</div></td>
<td>${orderline.quantityanduom}</div></td>
<td>${orderline.unitprice}</div></td>
<td>${orderline.linetotal}</div></td>
</tr>
#end
</table>
The print looks ok, but it’s hard to distinguish between the column headers and the column values and we also want to align the amount columns to the right. We’ll add a few styles to make that happen.
<style>
.invoice-table {box-sizing: border-box; border-collapse: collapse;width: 100%; max-width: 99%;}
.column-header {box-sizing: border-box; font-size: .8em; color: #555555; text-align: center;}
.number-cell {width: 100%; text-align: right;}
</style>
<table class="invoice-table">
<th>
<td class="column-header">Description</td>
<td class="column-header">Date / Time</td>
<td class="column-header">Persons</td>
<td class="column-header">Quantity</td>
<td class="column-header">Price</td>
<td class="column-header">Total</td>
</th>
#foreach($orderline in $orderlines)
<tr>
<td>${orderline.description}</td>
<td>${orderline.datetime}</td>
<td><div class="number-cell">${orderline.nopersons}</div></td>
<td><div class="number-cell">${orderline.quantityanduom}</div></td>
<td><div class="number-cell">${orderline.unitprice}</div></td>
<td><div class="number-cell">${orderline.linetotal}</div></td>
</tr>
#end
</table>
See related articles on Print Templates:
How to add styles to a print template
How to use conditional formatting in a print template