Government of Canada / Gouvernement du Canada

Search

Zebra striping

Striped rows

The following examples depends on the striped rows functionality available from Twitter Bootstrap CSS.

<table class="table table-striped table-hover">

Generic Invoice Table
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

Complex Table

Provide visual emphasis on relationship for table that was build with the 12 techniques for tables. Summary group are in gray. Key column and description column are in italic. A delimiter is added for subsequent column group. Row hovering effect on summary row group is in a lighter color. Provide support for column hovering effect.

The hassum options is an indicator for the table parser to allow the support for summary group. The 12 techniques for tables contains explaination on how to build tables with summary group.

<table class="wb-zebra hassum table table-hover">

Generic Invoice Table
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
View code 
<table class="wb-zebra hassum table table-hover">
	<caption>Generic Invoice Table</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>
	<tbody>
		<tr>
			<th colspan="5">Total</th>
			<td>571.78</td>
		</tr>
	</tbody>
</table>

Multiple Group

The following table contain 3 row group and 3 column group. The zebra stripping add column group separator and simulate the column hovering effect.

<table class="wb-zebra wb-zebra-col-hover table table-bordered table-hover">

1 3 6 4 7 9
2 9 1
7 6
2 4 3 9 8
 
5 9 7 1
6 5 2
7
9 8 2 5
View code 
<table class="wb-zebra wb-zebra-col-hover table table-bordered table-hover">
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
		<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
		<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<tbody>
		<tr>
			<td>1</td>
			<td></td>
			<td>3</td>
			<td>6</td>
			<td></td>
			<td>4</td>
			<td>7</td>
			<td></td>
			<td>9</td>
		</tr>
		<tr>
			<td></td>
			<td>2</td>
			<td></td>
			<td></td>
			<td>9</td>
			<td></td>
			<td></td>
			<td>1</td>
			<td></td>
		</tr>
		<tr>
			<td>7</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>6</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>2</td>
			<td></td>
			<td>4</td>
			<td></td>
			<td>3</td>
			<td></td>
			<td>9</td>
			<td></td>
			<td>8</td>
		</tr>
		<tr>
			<td>&#160;</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>5</td>
			<td></td>
			<td></td>
			<td>9</td>
			<td></td>
			<td>7</td>
			<td></td>
			<td></td>
			<td>1</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>6</td>
			<td></td>
			<td></td>
			<td></td>
			<td>5</td>
			<td></td>
			<td></td>
			<td></td>
			<td>2</td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>7</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>9</td>
			<td></td>
			<td></td>
			<td>8</td>
			<td></td>
			<td>2</td>
			<td></td>
			<td></td>
			<td>5</td>
		</tr>
	</tbody>
</table>

Page details

Date modified: