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’attributchar
;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 avecwidth
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émentstable
oucol
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.