tableaux stylés

<style><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span><!--
<span id="__caret">_</span>�<span id="__caret">_</span>�<span id="__caret">_</span>�<span id="__caret">_</span>�<span id="__caret">_</span>�<span id="__caret">_</span>�<span id="__caret">_</span>
.tableau {
  width:100%;
  table-layout: fixed;
  border-collapse: collapse;
  padding: 5px;
}
.tableau caption { /*TITRE 1*/
  font-size:1.4rem;
  color:#ffffff;
  background-color: #615667;
  padding: 5px;
 /* caption-side: bottom; // top|bottom|initial|inherit; */
}
.tableau th { /*TITRE2*/
  background-color:#988B9E;
  color:#fff;
  padding: 5px;
}
.tableau tfoot td {
  color:#fff;
  background-color:#999690;
  border-top:1px solid #5d625c;
  border-bottom:1px solid #5d625c;
  padding: 5px;
}
.zebre tbody tr:nth-child(odd) { /*LIGNE 1*/
  background-color: #D5CED7;
  border-bottom:1px solid #ccc;
  color:#333333;
  padding: 5px;
}
.zebre tbody tr:nth-child(even) {  /*LIGNE 2*/
  background-color: #C4BAC9;
  border-bottom:1px solid #ccc;
  color:#333333;
  padding: 5px;
}


/* La couleur ne fonctionne pas avec odd / even */
.tableau col:nth-child(1) {
  background-color:#D5CED7;
  padding: 5px;
}
.tableau col:nth-child(2) {
  background-color:#C4BAC9;width:100px;text-align:right;
  padding: 5px;
}


.tableau td:nth-child(2) {
  text-align:right;
  padding: 5px;
}
--></style>
<table class="tableau zebre"><caption>Exemple de tableau stylis&eacute;</caption><colgroup> <col /> <col /> <col /> </colgroup>
<thead>
<tr><th style="text-align: left; width: 250px; padding: 5px;">Classes</th><th style="text-align: left; width: 450px; border-left: 2px solid #615667; padding: 5px;">&nbsp; El&egrave;ves</th></tr>
</thead>
<tbody>
<tr>
<td>Montr&eacute;al</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>&Eacute;loi</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>Rivi&egrave;re-du-Loup</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>Cacouna</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>Les Boules</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>Saint-Ars&egrave;ne</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>Rimouski</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>L&rsquo;Isle-Verte</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
<tr>
<td>Rimouski</td>
<td style="text-align: left; border-left: 2px solid #615667;">1</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>