Invoice example Tables

A complex example of a table. As presented at the Web Experience Toolkit Codefest 4.

Invoice
Product ID Product Description Quantity Unit Price Total
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Key Item Description 2 times $25.99 51.98
Subtotal 519.80
Taxes (10%) 51.98
Total 571.78

Source code

<table class="wb-zebra hassum table table-hover">
	<caption>Invoice</caption>
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
	</colgroup>
	<thead>
		<tr>
			<th>Product ID</th>
			<th>Product</th>
			<th>Description</th>
			<th>Quantity</th>
			<th>Unit Price</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Key</td>
			<th>Item</th>
			<td>Description</td>
			<td>2 times</td>
			<td>$25.99</td>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Subtotal</th>
			<td>519.80</td>
		</tr>
		<tr>
			<th colspan="5">Taxes (10%)</th>
			<td>51.98</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th colspan="5">Total</th>
			<td>571.78</td>
		</tr>
	</tfoot>
</table>
Date modified: