Tableaux W3.CSS
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mike | Ross | 35 |
Classes de tables W3.CSS
W3.CSS fournit les classes suivantes pour les tables :
| Classer | Définit |
|---|---|
| table w3 | Conteneur pour un tableau HTML |
| w3-rayé | Tableau rayé |
| bordure w3 | Tableau bordé |
| w3-bordé | Lignes bordées |
| centré sur w3 | Contenu du tableau centré |
| w3-survolable | Table flottante |
| w3-table-all | Toutes les propriétés définies |
Tableau de base
La classe w3-table permet d'afficher un tableau de base :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Tableau rayé
La classe w3-striped est utilisée pour ajouter des rayures zébrées à une table :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table w3-striped">
Tableau bordé
La classe w3-bordered ajoute une bordure inférieure à chaque ligne du tableau :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table w3-bordered">
Table Bordée Rayée
Combinez la classe w3-striped et la classe w3-bordered pour créer une table rayée :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table w3-striped w3-bordered">
Bordure autour d'une table
La classe w3-border est utilisée pour afficher une bordure autour d'un tableau :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table w3-striped w3-border">
Astuce : La classe w3-border n'est pas seulement pour les tables. Il peut être utilisé sur n'importe quel élément HTML !
Tout afficher
La classe w3-table-all combine toutes les classes ci-dessus :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all">
Renverser les rayures
Pour inverser les rayures (commencez par la couleur gris clair), ajoutez un élément <thead> autour de la ligne d'en-tête du tableau. Vous devez également définir une couleur à utiliser pour la ligne d'en-tête du tableau :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
Exemple
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Centrage de tout le contenu
La classe w3-centered centre le contenu de la table :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-centered">
Centrage d'une colonne
La classe w3-center centre le contenu d'une colonne :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Aligner à droite une colonne
La classe w3-right-align aligne à droite le contenu d'une colonne :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Table flottante
La classe w3-hoverable ajoute une couleur de fond grise au passage de la souris :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all
w3-hoverable">
Couleurs de survol
Si vous voulez une couleur de survol spécifique, ajoutez l'une des classes w3-hover- color à chaque élément <tr> :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<tr class="w3-hover-green">
Combinaison de classes W3.CSS
De nombreuses classes W3.CSS peuvent être utilisées sur tous les éléments HTML.
Par exemple : classes de bordures, classes de couleurs, classes de polices, classes de cartes, etc.
En-tête de tableau coloré
Utilisez l'une des classes de couleurs w3- pour afficher une ligne colorée :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Tableau coloré
Utilisez n'importe laquelle des classes de couleurs w3- pour afficher un tableau coloré :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table w3-blue">
Tableau réactif
La classe w3-responsive crée une table responsive. Le tableau défilera alors horizontalement sur de petits écrans. Lors de la visualisation sur de grands écrans, il n'y a aucune différence.
Redimensionnez l'écran pour voir l'effet sur le tableau ci-dessous :
| Prénom | Nom de famille | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Julie | Forgeron | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Veille | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Exemple
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Tableau sous forme de carte
Utilisez une classe w3-card pour afficher un tableau sous forme de carte :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-card-4">
Petite Table
Utilisez la classe w3-tiny pour afficher une petite table :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-tiny">
Petite table
Utilisez la classe w3-small pour afficher un petit tableau :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-small">
Grande Table
Utilisez la classe w3-large pour afficher un grand tableau :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-large">
Table XL
Utilisez la classe w3-xlarge pour afficher une table xlarge :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-xlarge">
Table XXL
Utilisez la classe w3-xxlarge pour afficher une table xxlarge :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-xxlarge">
XXXGrande Table
Utilisez la classe w3-xxxlarge pour afficher une table xxxlarge :
| Prénom | Nom de famille | Points |
|---|---|---|
| Julie | Forgeron | 50 |
| Veille | Jackson | 94 |
| Adam | Johnson | 67 |
Exemple
<table class="w3-table-all w3-xxxlarge">
Table géante
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">