HTML Style de table
Utilisez CSS pour améliorer l'apparence de vos tableaux.
HTML Tableau - Rayures Zébrées
Si vous ajoutez une couleur d'arrière-plan sur une ligne sur deux du tableau, vous obtiendrez un bel effet de rayures zébrées.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Pour styliser tous les autres éléments de ligne du tableau, utilisez le sélecteur :nth-child(even) comme ceci :
Remarque : Si vous utilisez (odd) au lieu de (even), le style se produira sur les rangs 1,3,5, etc. au lieu de 2,4,6, etc.
HTML Tableau - Rayures zébrées verticales
Pour créer des rayures zébrées verticales, stylisez une colonne sur deux, au lieu d'une ligne sur deux.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Définissez le :nth-child(even) pour les éléments de données du tableau comme ceci :
Remarque : Placez le sélecteur :nth-child() sur th et td si vous souhaitez avoir le style à la fois sur les en-têtes et sur les cellules normales du tableau.
Combinez des rayures zébrées verticales et horizontales
Vous pouvez combiner le style des deux exemples ci-dessus et vous obtiendrez des rayures sur une ligne sur deux et sur une colonne sur deux.
Si vous utilisez une couleur transparente, vous obtiendrez un effet de superposition.
Utilisez une couleur rgba() pour spécifier la transparence de la couleur :
Exemple
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
Try it Yourself »
Diviseurs horizontaux
| Prénom | Nom de famille | Économies |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Si vous spécifiez des bordures uniquement au bas de chaque ligne du tableau, vous obtiendrez un tableau avec des séparateurs horizontaux.
Ajoutez la propriété border-bottom à tous les éléments tr pour obtenir des séparateurs horizontaux :
Tableau planable
Utilisez le sélecteur :hover sur tr pour mettre en surbrillance les lignes du tableau au survol de la souris :
| Prénom | Nom de famille | Économies |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
