Les tableaux Bootstrap 3

Un tableau est un élémént HTML, utilisé pour le classement et à la présentation des données. Ce n’est donc pas un outil de mise en page même s’il est souvent employé, par erreur, à cet effet.

Pour simplifier la présentation et la mise en forme des données, Bootstrap 3 propose quatre modèles de tableaux :

Les tableaux basiques

Avec ou sans utilisation du framework Bootstrap 3, un tableau se déclare avec la balise <table>. Mais pour appliquer la mise en forme Bootstrap 3, il faudra appeler la classe .table lors de la déclaration du tableau :

Ce qui donne le résultat suivant :

tableau-basique-bootstrap3

Les tableaux basiques Bootstrap 3

Les tableaux condensés

Les tableaux condensés sont identiques aux tableaux basiques, avec une legère difference au niveau de padding (padding = 8px pour les tableaux basiques et padding = 5px pour les tableaux condensés).

Pour créer un tableau condensés, il suffit de faire appel à la classe .table-condensed, qui sera déclarée en complément de .table:

À l’écran, un tableau condensé a l’aspect suivant :

Les tableaux condensés Bootstrap 3

Les tableaux condensés Bootstrap 3

Les tableaux avec bordures

Il faut seulement ajouter à .table la classe .table-bordered pour obtenir un tableau avec bordures :

À l’écran, le tableau prend la forme suivante :

Les tableaux avec bordures Bootstrap 3

Les tableaux avec bordures Bootstrap 3

Les tableaux zébrés

Les tableaux zébrés sont utilisés pour améliorer la visibilité des données. La classe .table-striped est utilisée pour obtenir ce rendu :

À l’écran, le tableau zébré prend la forme suivante :

Les tableaux zébrés Bootstrap 3

Les tableaux zébrés Bootstrap 3

Laisser un commentaire