Exercice HTML: Apparence d’un tableau
Rédigé par GC Team, Publié le 11 Janvier 2012, Mise à jour le Jeudi, 15 Décembre 2022 19:32![](/images/thumb/147/default.png)
Participez au vote ☆☆☆☆☆★★★★★
Créer les ?chiers XHTML et CSS a?n de mettre en page les tableaux comme sur la Figure suivante.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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;} |