Les tableaux

jdb-table

Tableau simple - Démo intéractive

Nom	Age	Rôle
James	24	Analyste Ingénieur Développeur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<div class="jdb-responsive">
  <table class="jdb-table">
    <thead class="">
      <tr>
        <th>Nom</th>
        <th>Age</th>
        <th>Rôle</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>James</td><td>24</td><td>Analyste<br>Ingénieur<br>Développeur</td></tr>
      <tr><td>Jill</td><td>26</td><td>Ingénieur</td></tr>
      <tr><td>Elyse</td><td>24</td><td>Designer</td></tr>
      <tr><td>Alex</td><td>25</td><td>Développeur</td></tr>
    </tbody>
  </table>
</div>

Tableau rayée

La classe jdb-striped est utilisée pour ajouter des rayures zébrées à un tableau :

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<table class="jdb-table jdb-striped">
  <!-- Contenu du tableau -->
</table>

Tableau bordé

La classe jdb-border ajoute une bordure autour d'un tableau.
La classe jdb-bordered ajoute une bordure inférieure à chaque ligne de tableau.
La classe jdb-bordered-all combine les deux classes précédentes en ajoutant une bordure à chaque cellule d'un tableau.

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<table class="jdb-table jdb-border">
  <!-- Contenu du tableau -->
</table>

<table class="jdb-table jdb-bordered">
  <!-- Contenu du tableau -->
</table>

<table class="jdb-table jdb-bordered-all">
  <!-- Contenu du tableau -->
</table>

La classe jdb-border n'est pas uniquement destinée aux tableaux. Elle peut être utilisée pour ajouter une bordure à n'importe quel élément HTML !

Tableau rayée à bordure

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<table class="jdb-table jdb-striped jdb-bordered">
  <!-- Contenu du tableau -->
</table>

Tableau complet

La classe jdb-table-all combine les classes jdb-border et jdb-striped :

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<table class="jdb-table-all">
  <!-- Contenu du tableau -->
</table>

Renverser les rayures

Pour inverser les rayures (commencez par la couleur gris clair - jdb-light-gray), 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 (<tr>) :

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<div class="jdb-responsive">
  <table class="jdb-table-all">
    <thead>
      <tr class="jdb-light-gray">
        <th>Nom</th>
        <th>Age</th>
        <th>Rôle</th>
      </tr>
    </thead>
    <tbody>
      <!-- Contenu du tableau -->
    </tbody>
  </table>
</div>

Centrer tout le contenu

La classe jdb-centered centre tout le contenu d'un tableau horizontalement et verticalement.
La classe jdb-align-top aligne verticalement en haut le contenu d'une cellule.
La classe jdb-align-middle centre verticalement le contenu d'une cellule.
La classe jdb-align-bottom aligne verticalement en bas le contenu d'une cellule.

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<table class="jdb-table-all jdb-centered">
  <tbody>
    <tr><td>James</td><td>24</td><td rowspan="2">Ingénieur</td></tr>
    <tr><td>Jill</td><td>26</td></tr>
    <tr><td>Elyse</td><td>24</td><td>Designer</td></tr>
    <tr><td>Alex</td><td>25</td><td>Développeur</td></tr>
  </tbody>
</table>

Alignement du contenu des colonnes

La classe jdb-center centre le contenu d'une colonne.
La classe jdb-right-align aligne le contenu d'une colonne à droite.

Pour aligner le contenu d'une colonne, ajoutez une classe d'alignement à l'élément d'en-tête (<th>) de chaque colonne à aligner, comme ceci :

Code :

<div class="jdb-responsive">
  <table class="jdb-table-all">
    <thead class="">
      <tr>
        <th class="jdb-center">Nom</th>
        <th>Age</th>
        <th class="jdb-right-align">Rôle</th>
        <th>Expériences</th>
      </tr>
    </thead>
    <tbody>
      <!-- Contenu du tableau -->
    </tbody>
  </table>
</div>

Tableau avec des petits textes

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<div class="jdb-responsive">
  <table class="jdb-table-all jdb-sm" style="max-width:300px">
    <!-- Contenu du tableau -->
  </table>
</div>

Tableau survolable

Style par défaut

La classe jdb-hoverable ajoute une couleur de fond grise à chaque ligne au survol de la souris :

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<table class="jdb-table-all jdb-hoverable">
  <!-- Contenu du tableau -->
</table>

Style personnalisé

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

Nom	Age	Rôle
James	24	Ingénieur
Jill	26	Ingénieur
Elyse	24	Designer
Alex	25	Développeur

Code :

<table class="jdb-table-all">
  <thead>
    <tr class="jdb-light-gray">
      <th>Nom</th>
      <th>Age</th>
      <th>Rôle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="jdb-hover-sand"><td>James</td><td>24</td><td>Ingénieur</td></tr>
    <tr class="jdb-hover-khaki"><td>Jill</td><td>26</td><td>Ingénieur</td></tr>
    <tr class="jdb-hover-teal"><td>Elyse</td><td>24</td><td>Designer</td></tr>
    <tr class="jdb-hover-amber"><td>Alex</td><td>25</td><td>Développeur</td></tr>
  </tbody>
</table>

Tableau responsif

La classe jdb-responsive crée un tableau responsif. Un tableau responsif peut défiler 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 :

Nom	Age	Rôle	Score	Score	Score	Score	Score
James	24	Ingénieur	2400	2400	2400	2400	2400
Jill	26	Ingénieur	2900	2900	2900	2900	2900
Elyse	24	Designer	3700	3700	3700	3700	3700
Alex	25	Développeur	4800	4800	4800	4800	4800

Code :

<div class="jdb-responsive">
  <!-- Ajouter un style `min-width:900px` à l'élément
    `table` pour lui donner une taille fixe. -->
  <table class="jdb-table-all">
    <thead>
      <tr class="jdb-light-gray">
        <th>Nom</th>
        <th>Age</th>
        <th>Rôle</th>
        <th>Score</th>
        <th>Score</th>
        <th>Score</th>
        <th>Score</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>James</td><td>24</td><td>Ingénieur</td><td>2400</td><td>2400</td><td>2400</td><td>2400</td><td>2400</td></tr>
      <tr><td>Jill</td><td>26</td><td>Ingénieur</td><td>2900</td><td>2900</td><td>2900</td><td>2900</td><td>2900</td></tr>
      <tr><td>Elyse</td><td>24</td><td>Designer</td><td>3700</td><td>3700</td><td>3700</td><td>3700</td><td>3700</td></tr>
      <tr><td>Alex</td><td>25</td><td>Développeur</td><td>4800</td><td>4800</td><td>4800</td><td>4800</td><td>4800</td></tr>
    </tbody>
  </table>
</div>

Voici d'autres exemples de tableaux un peu plus avancés...

Évaluation	Effet	Efficacité	Consensus	Commentaires
A	Puissance de sortie	/ 5	80% 18 études	La supplémentation en créatine est le composé de référence pour augmenter les niveaux de créatine musculaire; il y a cependant une variabilité dans cette augmentation avec certains non-répondants.
A	Taille	/ 5	100% 65 études	La créatine est le composé de référence pour l'amélioration de la puissance, avec des chiffres provenant d'une méta-analyse pour évaluer la puissance.
1 2 3 4

Code :

<div class="jdb-responsive">
  <table class="jdb-table jdb-bordered-all jdb-align-middle" style="min-width:1100px">
    <thead class="jdb-light-gray">
      <tr>
        <th class="jdb-center" style="width:10%">Évaluation</th>
        <th class="jdb-center" style="width:13%">Effet</th>
        <th class="jdb-center" style="width:12%">Efficacité</th>
        <th class="jdb-center" style="width:15%">Consensus</th>
        <th class="jdb-center" style="width:60%">Commentaires</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><h2 class="h2 jdb-xl jdb-center">A</h2></td>
        <td>Puissance de sortie</td>
        <td>
          <div class="jdb-center jdb-text-shadow" data-rating="3" data-max-rating="5">
            <i class="fa fa-fw fa-star jdb-text-yellow" aria-hidden="true"></i>
            <i class="fa fa-fw fa-star jdb-text-yellow" aria-hidden="true"></i>
            <i class="fa fa-fw fa-star jdb-text-yellow" aria-hidden="true"></i>
            <i class="fa fa-fw fa-star jdb-text-yellow" aria-hidden="true"></i>
            <div class="jdb-text-shadow-0 jdb-bold">/ 5</div>
          </div>
        </td>
        <td class="jdb-right-align">
          80%<br>
          <a class="jdb-text-blue jdb-text-decoration-0" href="#">
            18 études
          </a>
        </td>
        <td>La supplémentation en créatine est le composé de référence pour augmenter
          les niveaux de créatine musculaire; il y a cependant une variabilité dans cette
          augmentation avec certains non-répondants.
        </td>
      </tr>
      <tr>
        <td><h2 class="h2 jdb-xl jdb-center">A</h2></td>
        <td>Taille</td>
        <td>
          <div class="jdb-center jdb-text-shadow" data-rating="3" data-max-rating="5">
            <i class="fa fa-fw fa-star jdb-text-yellow" aria-hidden="true"></i>
            <i class="fa fa-fw fa-star jdb-text-yellow" aria-hidden="true"></i>
            <i class="fa fa-fw fa-star jdb-text-yellow" aria-hidden="true"></i>
            <i class="fa fa-fw fa-star-half jdb-text-yellow" aria-hidden="true"></i>
            <div class="jdb-text-shadow-0 jdb-bold">/ 5</div>
          </div>
        </td>
        <td class="jdb-right-align">
          100%<br>
          <a class="jdb-text-blue jdb-text-decoration-0" href="#">
            65 études
          </a>
        </td>
        <td>La créatine est le composé de référence pour l'amélioration de la puissance,
          avec des chiffres provenant d'une méta-analyse pour évaluer la puissance.
        </td>
      </tr>
    </tbody>
    <tfoot class="jdb-light-gray">
      <tr>
        <th colspan="5">
          <div class="jdb-bar jdb-right jdb-bordered-items jdb-rounded">
            <a class="jdb-bar-item jdb-button jdb-white jdb-hover-gray">
              <i class="fa fa-fw fa-angle-left" aria-hidden="true" aria-label="Précédent"></i>
            </a>
            <a class="jdb-bar-item jdb-button jdb-white jdb-hover-gray jdb-text-indigo">1</a>
            <a class="jdb-bar-item jdb-button jdb-white jdb-hover-gray">2</a>
            <a class="jdb-bar-item jdb-button jdb-white jdb-hover-gray">3</a>
            <a class="jdb-bar-item jdb-button jdb-white jdb-hover-gray">4</a>
            <a class="jdb-bar-item jdb-button jdb-white jdb-hover-gray">
              <i class="fa fa-fw fa-angle-right" aria-hidden="true" aria-label="Suivant"></i>
            </a>
          </div>
        </th>
      </tr>
    </tfoot>
  </table>
</div>

Git Repository
assets / scss / main.css	Initial commit	10 hours ago
node_modules	Initial commit	10 hours ago
test	Initial commit	10 hours ago
build	Initial commit	10 hours ago
package.json	Add new package	8 hours ago
Gruntfile.js	Fix issue #1	5 hours ago

Code :

<div class="jdb-responsive">
  <table class="jdb-table jdb-hoverable jdb-bordered-all jdb-align-middle" style="min-width:700px">
    <thead class="jdb-light-gray">
      <tr>
        <th style="width:35%">Git Repository</th>
        <th style="width:45%"></th>
        <th style="width:20%"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <i class="fa fa-fw fa-folder jdb-text-blue"></i>
          <span class="jdb-text-gray"> assets / scss / </span>main.css
        </td>
        <td>Initial commit</td>
        <td class="right aligned collapsing">10 hours ago</td>
      </tr>
      <tr>
        <td><i class="fa fa-fw fa-folder jdb-text-blue"></i> node_modules</td>
        <td>Initial commit</td>
        <td class="right aligned collapsing">10 hours ago</td>
      </tr>
      <tr>
        <td><i class="fa fa-fw fa-folder jdb-text-blue"></i> test</td>
        <td>Initial commit</td>
        <td class="right aligned">10 hours ago</td>
      </tr>
      <tr>
        <td><i class="fa fa-fw fa-folder jdb-text-blue"></i> build</td>
        <td>Initial commit</td>
        <td class="right aligned">10 hours ago</td>
      </tr>
      <tr>
        <td><i class="fa fa-fw fa-file-o"></i> package.json</td>
        <td>Add new package</td>
        <td class="right aligned">8 hours ago</td>
      </tr>
      <tr>
        <td><i class="fa fa-fw fa-file-o"></i> Gruntfile.js</td>
        <td>Fix issue <a class="jdb-text-blue" href="#">#1</a></td>
        <td class="right aligned">5 hours ago</td>
      </tr>
    </tbody>
  </table>
</div>