Invoice Table - Zebra striping - Web Experience Toolkit (WET)

Without colgroup and Without rowgroup

Invoice Table 1
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 of Invoice Table 1 

<table class="wet-boew-zebra">
	<caption>Invoice Table 1</caption>
	<tr>
		<th>Product ID</th>
		<th>Product</th>
		<th>Description</th>
		<th>Quantity</th>
		<th>Unit Price</th>
		<th>Total</th>
	</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>
	<tr>
		<td>Key</td>
		<th>Item</th>
		<td>Description</td>
		<td>2 times</td>
		<td>25.99 $</td>
		<td>51.98</td>
	</tr>
	<tr>
		<th colspan="5">Subtotal</td>
		<td>519.80</td>
	</tr>
	<tr>
		<th colspan="5">Taxes (10%)</td>
		<td>51.98</td>
	</tr>
	<tr>
		<th colspan="5">Total</td>
		<td>571.78</td>
	</tr>
</table>

With colgroup and rowgroup

Invoice Table 2
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 of Invoice Table 2 

<table class="wet-boew-zebra">
	<caption>Invoice Table 2</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</td>
			<td>519.80</td>
		</tr>
		<tr>
			<th colspan="5">Taxes (10%)</td>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Total</td>
			<td>571.78</td>
		</tr>
	</tbody>
</table>

With colgroup and rowgroup and the class hassum

Please note: Using of the class hassum

This have an impact on relationships between the consecutive data group in the same data level. Subsequent groups would be know as summary group. Third and subsequent groups get their data level decreased.

Invoice Table 3
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 of Invoice Table 3 

<table class="wet-boew-zebra hassum">
	<caption>Invoice Table 3</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</td>
			<td>519.80</td>
		</tr>
		<tr>
			<th colspan="5">Taxes (10%)</td>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Total</td>
			<td>571.78</td>
		</tr>
	</tbody>
</table>

With colgroup, rowgroup and last row group is tfoot

Invoice Table 4
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 of Invoice Table 4 

<table class="wet-boew-zebra">
	<caption>Invoice Table 4</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</td>
			<td>519.80</td>
		</tr>
		<tr>
			<th colspan="5">Taxes (10%)</td>
			<td>51.98</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th colspan="5">Total</td>
			<td>571.78</td>
		</tr>
	</tfoot>
</table>