Derniers tutoriels de développement web
 

W3.CSS table

❮ Précédent Suivant Chapitre ❯

Affichage d'un tableau

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67
Bo Nilsson 50
Mike Ross 35

Tableau de base

Prénom Nom de famille Points
Jill 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>
Try It Yourself »

Tableau bordé

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-border">
Try It Yourself »

Table Striped

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-striped">
Try It Yourself »

Bordée Table Striped

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped">
Try It Yourself »

Bordure autour d'une table à rayures

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped w3-border">
Try It Yourself »

Retournement Stripes

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Pour inverser les rayures, il suffit d'ajouter <thead> autour de la tête de la table:

Exemple

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Try It Yourself »

Table avec une tête de couleur

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Try It Yourself »

Tableau Couleurs

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-blue">
Try It Yourself »

Tableau Hoverable

La classe w3-hoverable ajoute une couleur de fond gris sur la souris sur:

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Try It Yourself »

Si vous voulez une couleur hover spécifique, ajoutez l' une des w3-hover-classes à chaque élément <tr>:

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<tr class="w3-hover-green">
Try It Yourself »

Table comme une carte

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped w3-card-4">
Try It Yourself »

Tableau Responsive

Une table réactive affiche une barre de défilement horizontale si l'écran est trop petit pour afficher le contenu complet.

Essayez de redimensionner l'écran pour voir l'effet.

Prénom Nom de famille Points Points Points Points Points Points Points Points Points Points Points Points Points
Jill Forgeron 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Veille Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Exemple

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Try It Yourself »

minuscule Table

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped w3-tiny">
Try It Yourself »

Petite table

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped w3-small">
Try It Yourself »

Grande table

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped w3-large">
Try It Yourself »

XLarge Table

Prénom Nom de famille Points
Jill Forgeron 50
Veille Jackson 94
Adam Johnson 67

Exemple

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Try It Yourself »

XXLarge Table

prénom Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Exemple

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Try It Yourself »

XXXLarge Table

prénom Points
Forgeron 50
Jackson 94
Johnson 67
Nilson 35

Exemple

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Try It Yourself »

Table Jumbo

prénom Points
Forgeron 50
Jackson 94
Johnson 67
Nilson 35

Exemple

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Try It Yourself »

❮ Précédent Suivant Chapitre ❯