Style de tableau HTML
Utilisez CSS pour améliorer l'apparence de vos tableaux.
Tableau HTML - Rayures zébrées
Si vous ajoutez une couleur de fond sur toutes les autres lignes du tableau, vous obtiendrez un bel effet de rayures zébrées.
| 1 | 2 | 3 | 4 |
| 5 | 6 | sept | 8 |
| 9 | dix | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Pour styliser tous les autres éléments de ligne du tableau, utilisez le :nth-child(even)
sélecteur comme ceci :
Exemple
tr:nth-child(even) {
background-color: #D6EEEE;
}
Remarque : Si vous utilisez à la (odd)place de
(even), le style apparaîtra sur les lignes 1, 3, 5, etc. au lieu de 2, 4, 6, etc.
Tableau HTML - 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 | sept | 8 |
| 9 | dix | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Définissez les :nth-child(even)éléments de données for table comme ceci :
Exemple
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Remarque : placez le :nth-child()sélecteur sur les éléments thet td
si vous souhaitez appliquer le style à la fois aux en-têtes et aux cellules de tableau standard.
Combinez les rayures zébrées verticales et horizontales
Vous pouvez combiner le style des deux exemples ci-dessus et vous aurez des rayures sur toutes les autres lignes et toutes les autres colonnes.
Si vous utilisez une couleur transparente, vous obtiendrez un effet de chevauchement.
Utilisez une rgba()couleur 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);
}
Diviseurs horizontaux
| Prénom | Nom de famille | Des économies |
|---|---|---|
| Pierre | Griffon | 100 $ |
| Loïs | Griffon | 150 $ |
| Jo | Swanson | 300 $ |
Si vous spécifiez des bordures uniquement au bas de chaque ligne du tableau, vous aurez un tableau avec des séparateurs horizontaux.
Ajoutez la border-bottompropriété à tous les
tréléments pour obtenir des séparateurs horizontaux :
Exemple
tr {
border-bottom: 1px solid #ddd;
}
Table flottante
Utilisez le :hoversélecteur
trpour mettre en surbrillance les lignes du tableau au passage de la souris :
| Prénom | Nom de famille | Des économies |
|---|---|---|
| Pierre | Griffon | 100 $ |
| Loïs | Griffon | 150 $ |
| Jo | Swanson | 300 $ |
Exemple
tr:hover {background-color: #D6EEEE;}