Exercice HTML corrigé apparence d’un tableau

Code HTML
<table class="droite">
 <tr>
 <th> Col 1 </th> <th> Col 2 </th> <th> Col 3</th>
 </tr>
 <tr class="impair">
 <td> Case1 </td><td> Case 2 </td><td> Case 3</td>
 </tr>
<tr class="pair">
<td> Case4 </td><td> Case 5 </td><td> Case 6</td>
</tr>
<tr class="impair">
<td> Case7 </td><td> Case 8 </td><td> Case 9</td>
</tr>
<tr class="pair">
<td> Case10 </td><td> Case 11 </td><td> Case12 </td>
</tr>
</table>

Code CSS
table
 {
 width : 400px;
 margin-left : auto;
 margin-right : auto;
 border : 2px solid black;
 border-collapse : collapse;
 text-align : center;
}
th,td
{
border : 1px solid black;
width : 30%;
height : 40px;
}
 tr { background-color : #DC2F2F; }

 tr.impair { background-color :#F16D6D; }

tr.pair { background-color : #CB4040;}

Télécharger aussi :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *