Mettre en forme un tableau HTML avec du CSS

Les tableaux sont des entités très particulières en HTML et des propriétés CSS ont donc été créées spécialement pour les mettre en forme et les personnaliser.

Dans cette leçon, nous allons découvrir ces différentes propriétés et apprendre à les utiliser.

 

Mettre en forme un tableau : attributs HTML vs CSS ?

S’il est vrai que le HTML sert à structurer le contenu et à lui donner du sens, nous créons des sites pour des visiteurs humains et donc nous voulons que ces sites soient compréhensibles pour eux et agréables à consulter.

Pour cela, nous devons généralement mettre en forme notre contenu HTML brut afin de mieux le présenter. Pour les tableaux, comme pour la majorité des éléments HTML, nous utilisions à l’époque des attributs de mise en forme HTML.

Les attributs les plus communs utilisés avec les tableaux étaient les suivants :

• align pour définir l’alignement du tableau dans la page ;
• bgcolor pour définir la couleur de fond du tableau ;
• border pour définir la taille d’une bordure autour du tableau ;
• cellpadding pour définir l’espace entre le contenu d’une cellule et sa bordure ;
• cellspacing pour définir l’espace entre deux cellules ;
• char pour aligner le contenu au sein d’une ligne à partir d’un certain caractère ;
• charoff pour définir le nombre de caractères à partir desquels le contenu doit être aligné depuis le caractère défini par l’attribut char ;
• frame pour définir les côtés du tableau sur lesquels tracer une bordure ;
• rules pour définir la manière dont les traits doivent apparaître au sein du tableau ;
• summary pour définir un texte servant à résumer le tableau au cas où celui-ci ne pourrait pas être affiché ;
• valign pour aligner verticalement le contenu des cellules au sein d’une ligne.

Ces attributs sont tous néanmoins tous dépréciés et vous ne devriez jamais les utiliser pour mettre en forme vos tableaux HTML. A la place, nous utiliserons plutôt le CSS qui nous offre aujourd’hui de très bonnes alternatives et un bon support pour la mise en forme de nos tableaux.

Ainsi, nous allons pouvoir par exemple ajouter des bordures autour de chaque cellule de notre tableau en appliquant la propriété border à nos éléments td puis fusionner les différentes bordures en une pour harmoniser l’ensemble en appliquant un border-collapse: collapse à notre élément table.

Nous allons encore pouvoir modifier la couleur de fond de notre tableau ou d’un élément particulier de notre tableau ou aligner son contenu en CSS.

Dans cette leçon, nous allons voir les propriétés CSS suivantes liées aux tableaux :

• border-collapse ;
• border-spacing ;
• caption-side ;
• empty-cells ;
• table-layout ;
• vertical-align.

 

Les propriétés border-collapse et border-spacing

La création de bordures dans les tableaux semble complexe à priori. En effet, en appliquant une propriété border à notre élément table, nous allons créer une bordure autour de notre tableau mais pas entre chaque cellule de celui-ci.

Au contraire, en appliquant une bordure à chaque élément th ou td, c’est-à-dire à chaque cellule de notre tableau, les bordures autour de chaque cellule ne vont pas se coller entre elles, ce qui n’est généralement pas le comportement voulu.

See the Pen Cours HTML CSS 7.3.1 by Pierre (@pierregiraud) on CodePen.

Les propriétés border-collapse et border-spacing ont été créées pour répondre à ce problème.

La propriété border-collapse va nous permettre de choisir si on veut faire fusionner les bordures des différentes cellules de notre tableau ou pas. On va pouvoir lui passer l’une de ces deux valeurs :

• separate : Valeur par défaut ; les bordures seront séparées et distinctes ;
• collapse : Les bordures adjacentes vont être fusionnées.

Nous allons donc généralement appliquer border à nos éléments th et td ainsi que la propriété border-collapse avec sa valeur collapse à notre élément table.

See the Pen Cours HTML CSS 7.3.2 by Pierre (@pierregiraud) on CodePen.

Dans le cas où l’on souhaite conserver des bordures séparées, on va tout de même pouvoir gérer la distance entre chaque bordure grâce à la propriété border-spacing.

Cette propriété va prendre une distance en valeur (en px, cm, em, rem, etc.) qui représente l’espace entre deux bordures adjacentes. Il faudra à nouveau l’appliquer à l’élément table.

See the Pen Cours HTML CSS 7.3.3 by Pierre (@pierregiraud) on CodePen.

Notez qu’indiquer un border-spacing : 0px ne va pas fusionner les bordures des cellules adjacentes comme le ferait border-collapse : collapse mais simplement coller les bordures des cellules adjacentes.

 

Contrôler la largeur des colonnes avec table-layout

La propriété table-layout va nous permettre de gérer la largeur des différentes colonnes de notre tableau ou plus exactement de choisir selon quel algorithme la largeur de chaque colonne doit être calculée.

On va pouvoir choisir parmi deux valeurs :

• auto : Valeur par défaut ; la largeur des différentes colonnes du tableau est calculée automatiquement afin que le tableau prenne le moins d’espace possible en hauteur. De plus, si une largeur a été définie avec width pour le tableau, alors celui-ci essaiera de la respecter tant que son contenu ne dépasse pas du tableau ;
• fixed : La largeur des colonnes va être déterminée à partir de la propriété width des éléments table ou col ou de la première ligne du tableau.

See the Pen Cours HTML CSS 7.3.4 by Pierre (@pierregiraud) on CodePen.

 

Définir l’affichage des cellules vides d’un tableau avec empty-cells

La propriété empty-cells va nous permettre de choisir si l’arrière-plan et les bordures d’une cellule sans contenu doivent être affichés ou pas.

Notez que cette propriété ne va pouvoir s’appliquer que si la valeur de la propriété border-collapse pour le tableau est separate.

On va pouvoir choisir parmi deux valeurs :

• show : Valeur par défaut ; les bordures et l’arrière-plan des cellules vides du tableau seront bien visibles ;
• hide : Les bordures et l’arrière-plan des cellules vides du tableau ne sont pas affichés.

See the Pen Cours HTML CSS 7.3.5 by Pierre (@pierregiraud) on CodePen.

 

Choisir où s’affiche la légende d’un tableau avec caption-side

La propriété caption-side va nous permettre de choisir où doit s’afficher la légende d’un tableau, c’est-à-dire où doit s’afficher le texte présent dans l’élément caption du tableau.

Aujourd’hui, nous pouvons choisir entre deux valeurs qui représentent deux emplacements :

• top Valeur par défaut ; la légende sera positionnée au-dessus du tableau ;
• bottom : La légende sera positionnée en dessous du tableau.

See the Pen Cours HTML CSS 7.3.6 by Pierre (@pierregiraud) on CodePen.

 

Aligner le contenu des cellules d’un tableau avec vertical-align

La propriété vertical-align sert à définir l’alignement vertical du contenu d’une cellule d’un tableau.

On va pouvoir lui passer une valeur de type longueur (en px ou en em par exemple), une valeur en pourcentage ou un mot clef à cette propriété.

Dans la grande majorité des cas, nous nous contenterons de choisir parmi l’un de ces 3 mots clefs :

• top : Le contenu de chaque cellule va se placer en haut de la cellule ;
• middle : Le contenu de chaque cellule va se placer au milieu de la cellule ;
• bottom : Le contenu de chaque cellule va se placer se bas de la cellule.

See the Pen Cours HTML CSS 7.3.7 by Pierre (@pierregiraud) on CodePen.