---
{
	"title": "Rayage du zèbre",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Rayage du zèbre pour les tableaux",
	"tag": "zebra",
	"parentdir": "zebra",
	"altLangPrefix": "zebra",
	"dateModified": "2014-07-20"
}
---

<h2>Rayage du zèbre pour les lignes</h2>

<p>L'example suivant dépend de la fonctionalité du <a href="https://getbootstrap.com/css/#tables-striped" hreflang="en">rayage du zèbre pour les lignes</a> fournie à l'aide de l'implémentation de <strong lang="en">Twitter Bootstrap CSS</strong></p>

<p><code>&lt;table class=&quot;table table-striped table-hover&quot;&gt;</code></p>

<table class="table table-striped 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>





<h2>Tableau complexe</h2>

<p>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.
</p>

<p>L'option CSS <code>hassum</code> 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 <span lang="en">(technique for table)</span>.</p>

<p><code>&lt;table class=&quot;wb-zebra hassum table table-hover&quot;&gt;</code></p>

<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>

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

<h2>Plusieurs groupe</h2>

<p>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.</p>

<p><code>&lt;table class=&quot;wb-zebra wb-zebra-col-hover table table-bordered table-hover&quot;&gt;</code></p>

<div class="row">
	<div class="col-sm-4">
		<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>
	</div>
</div>
<details>
	<summary>Code source</summary>
<pre><code>&lt;table class=&quot;wb-zebra wb-zebra-col-hover table table-bordered table-hover&quot;&gt;
	&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
		&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
		&lt;colgroup&gt;
		&lt;col&gt;
		&lt;col&gt;
		&lt;col&gt;
	&lt;/colgroup&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;1&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;3&lt;/td&gt;
			&lt;td&gt;6&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;4&lt;/td&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;2&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;1&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;6&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;2&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;4&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;3&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;8&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;5&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;1&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;6&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;5&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;2&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;7&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;9&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;8&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;2&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;&lt;/td&gt;
			&lt;td&gt;5&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</details>
