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">
| 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">
| 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> </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>- Date modified: