Rayage du zèbre

Rayage du zèbre pour les lignes

L'example suivant dépend de la fonctionalité du rayage du zèbre pour les lignes fournie à l'aide de l'implémentation de Twitter Bootstrap CSS

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

Tableau représentant une facture générique
Numéro du produit Produit Description Quantité Prix unitaire Total
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Sous-total 519.80
Taxes (10 %) 51.98
Total 571.78

Tableau complexe

Démarque visuellement une relation complex entre les groupes de donnée et les groupes sommaire. Cela pour les tableaux contruit à l'aide des 12 techniques pour tableaux. Les groupes sommaire sont illustré en gris. Les colonne clef et cellule descriptive sont en italique. Une bordure est ajouté entre 2 groupe de colonne. L'effect de survole pour les lignes appartenant à un groupe sommaire est d'une couleur plus claire. Peut simuler l'effect de survole pour les colonnes.

L'option CSS hassum est un indicateur pour le parseur de tableau complexe afin de reconnaître que ledit tableau peut contenir des groupes sommaires. Afin d'obtenir de plus ample renseignement vous pouvez consulter la documentation relative à la conception de tableau (technique for table).

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

Tableau représentant une facture générique
Numéro du produit Produit Description Quantité Prix unitaire Total
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Identifiant Article Description 2 fois 25.99 $ 51.98
Sous-total 519.80
Taxes (10 %) 51.98
Total 571.78
Visualiser le code 
<table class="wb-zebra hassum table table-hover">
	<caption>Tableau représentant une facture générique</caption>
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
	</colgroup>
	<thead>
		<tr>
			<th>Numéro du produit</th>
			<th>Produit</th>
			<th>Description</th>
			<th>Quantité</th>
			<th>Prix unitaire</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
		<tr>
			<td>Identifiant</td>
			<th>Article</th>
			<td>Description</td>
			<td>2 fois</td>
			<td>25.99 $</td>
			<td>51.98</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="5">Sous-total</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>

Plusieurs groupe

L'example suivant contient trois groupe de ligne et trois group de colonne. Le rayage de zèbre ajoute un séparateur de groupe de colonne et simule l'effet de survole pour les colonnes.

<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
Code source 
<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 de modification :