HTML Style de Table
Utilisez CSS pour améliorer l'apparence de vos tables.
Table HTML - Rayures Zebra
Si vous ajoutez une couleur de fond à chaque ligne de table alternative, vous obtiendrez un joli 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 chaque élément de ligne de table alternative, utilisez le sélecteur :nth-child(even) comme ceci :
Exemple
tr:nth-child(even) {
background-color: #D6EEEE;
} Remarque : Si vous utilisez (odd) au lieu de (even) , le style s'appliquera aux lignes 1, 3, 5, etc. au lieu de 2, 4, 6, etc.
Table HTML - Rayures Zebra Verticales
Pour créer des rayures zébrées verticales, stylisez chaque colonne , au lieu de chaque ligne .
| 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 de table comme ceci :
Exemple
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
} Remarque : Mettez le sélecteur :nth-child() sur les éléments th et td si vous souhaitez appliquer le style aux en-têtes et aux cellules de table régulières.
Combiner Rayures Zebra Verticales et Horizontales
Vous pouvez combiner le style des deux exemples ci-dessus pour obtenir des rayures sur chaque ligne et chaque colonne alternative.
Si vous utilisez une couleur transparente, vous obtiendrez un effet de chevauchement.
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);
} Séparateurs Horizontaux
| Prénom | Nom | Économies |
|---|---|---|
| Peter | Griffin | 100 $ |
| Lois | Griffin | 150 $ |
| Joe | Swanson | 300 $ |
Si vous spécifiez des bordures uniquement en bas de chaque ligne de table, vous obtiendrez une table avec des séparateurs horizontaux.
Ajoutez la propriété border-bottom à tous les éléments tr pour obtenir des séparateurs horizontaux :
Exemple
tr {
border-bottom: 1px solid #ddd;
} Table Hoverable
Utilisez le sélecteur :hover sur tr pour mettre en surbrillance les lignes de table au survol de la souris :
| Prénom | Nom | Économies |
|---|---|---|
| Peter | Griffin | 100 $ |
| Lois | Griffin | 150 $ |
| Joe | Swanson | 300 $ |
Exemple
tr:hover {background-color: #D6EEEE;}