Mettre en forme un tableau HTML

La mise en forme d’un tableau HTML n’est pas une chose très compliquée mais la nature des balises le composant impliquent l’utilisation de règles CSS dédiées.

Contrairement aux balises étudiées jusqu’à maintenant dont la propriété display était de valeur block, inline ou inlinne block, les balises composant un tableau possèdent chacune une valeur display spécifique :

• <tr> : table-row
• <td> : table-cell
• <th> : table-cell
• <table> : table
• <caption> : table-caption
• <thead> : table-header-group
• <tbody> : table-row-group
• <tfoot> : table-footer-group

Nous pourrons appliquer de nombreuses valeurs CSS connues à chacune de ces balises et redéfinir leur rendu graphique (font-family, font-weight, color, background-color, border,…), mais certaines particularités liées à la nature même des balises impliqueront l’utilisation de règles spécifiques pour affiner le rendu final.

Les bordures

La création de bordures dans les tableaux peut sembler complexe au début. En effet, en utilisant la propriété CSS « border » sur l’élément <table>, cela ne créera des bordures qu’autour du tableau, et non entre chaque cellule.

Pour créer des bordures entre les cellules, il est nécessaire d’utiliser la propriété « border » sur les éléments <th> et <td> individuellement, mais cela peut entraîner des bordures qui ne se rejoignent pas entre les cellules, ce qui n’est généralement pas souhaité.

Les propriétés CSS « border-collapse«  et « border-spacing«  ont été créées pour résoudre le problème de bordures non jointes entre les cellules d’un tableau. La propriété « border-collapse » permet de choisir si les bordures des différentes cellules doivent être fusionnées ou séparées. Il existe deux valeurs possibles :

• « separate » (valeur par défaut) : les bordures seront distinctes les unes des autres,
• « collapse » : les bordures adjacentes seront fusionnées.

Il est donc généralement recommandé d’appliquer la propriété « border » sur les éléments <th> et <td> et la propriété border-collapse avec la valeur collapse sur l’élément « table » pour obtenir un tableau avec des bordures jointes.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}

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.

Largeur des colonnes

La propriété table-layout permet de définir comment la largeur des colonnes d’un tableau est calculée. Il y a deux options : « auto« , qui calcule automatiquement la largeur pour prendre le moins d’espace possible en hauteur et respecte la propriété « width » définie pour le tableau, et « fixed« , qui définit la largeur en utilisant les propriétés « width » des éléments « table », « col » ou de la première ligne du tableau.

<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
    <td>Colonne 3</td>
    <td>Colonne 4</td>
  </tr>
  <tr>
    <td>Contenu 1A</td>
    <td>Contenu 2A</td>
    <td>Contenu 3A</td>
    <td>Contenu 4A</td>
  </tr>
  <tr>
    <td>Contenu 1B</td>
    <td>Contenu 2B</td>
    <td>Contenu 3B</td>
    <td>Contenu 4B</td>
  </tr>
</table>

table {
  table-layout: fixed;
  width: 100%;
}

td {
  width: 20%;
}

Les cellules vides

La propriété CSS « empty-cells » permet de définir comment les cellules vides d’un tableau sont gérées en termes de style. Il existe trois valeurs possibles pour cette propriété : « show », « hide » et « inherit ».

• La valeur « show » indique que les bordures et le fond de la cellule vide seront affichés. C’est la valeur par défaut.
• La valeur « hide » indique que les bordures et le fond de la cellule vide ne seront pas affichés.
• La valeur « inherit » indique que la propriété doit être héritée de l’élément parent.

Il est important de noter que cette propriété ne s’applique qu’aux cellules qui sont vraiment vides, c’est-à-dire celles qui ne contiennent pas de contenu, pas même des espaces ou des caractères de saut de ligne. Cette propriété est utile pour améliorer l’apparence de votre tableau et pour rendre le contenu plus lisible en cachant les cellules vides inutiles. En utilisant cette propriété, vous pouvez également économiser de l’espace sur votre page en masquant les cellules vides qui ne sont pas nécessaires.

<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
    <td>Colonne 3</td>
  </tr>
  <tr>
    <td>Contenu 1</td>
    <td></td>
    <td>Contenu 3</td>
  </tr>
</table>

table {
  empty-cells: hide;
}

Définir l’emplacement du <caption>

La propriété CSS « caption-side » permet de définir la position de la légende (ou caption) d’un tableau. Il existe deux valeurs possibles pour cette propriété : « top » et « bottom« .

• La valeur « top » indique que la légende sera affichée en haut du tableau.
• La valeur « bottom » indique que la légende sera affichée en bas du tableau.

Il est important de noter que pour utiliser cette propriété, il faut d’abord ajouter une balise « caption » à l’intérieur de la balise « table » pour définir le contenu de la légende.

<table>
  <caption>Titre du tableau</caption>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
    <td>Colonne 3</td>
  </tr>
  <tr>
    <td>Contenu 1</td>
    <td>Contenu 2</td>
    <td>Contenu 3</td>
  </tr>
</table>

table {
  caption-side: bottom;
}

Aligner le contenu des cellules

Contrairement aux éléments blocks ou inline, il sera possible de gérer l’emplacement vertical d’une cellule.

La propriété « vertical-align » en CSS permet de définir la position verticale d’un élément par rapport à son élément parent ou à la ligne de base. Il existe plusieurs valeurs possibles pour cette propriété telles que « baseline », « top », « middle », « bottom » et « text-top ».

• La valeur « baseline » aligne l’élément sur la ligne de base du texte. C’est la valeur par défaut pour les cellules de tableau.
• La valeur « top » aligne l’élément en haut de la cellule.
• La valeur « middle » aligne l’élément au milieu de la cellule.
• La valeur « bottom » aligne l’élément en bas de la cellule.
• La valeur « text-top » aligne l’élément en haut du texte de la cellule.

Cette propriété est utile pour aligner verticalement les éléments à l’intérieur d’une cellule de tableau, ou pour aligner des éléments qui sont à l’extérieur d’un tableau mais qui doivent être alignés verticalement par rapport à un élément de tableau.

<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
    <td>Colonne 3</td>
  </tr>
  <tr>
    <td>Contenu 1</td>
    <td>Contenu 2</td>
    <td>Contenu 3</td>
  </tr>
</table>

td {
  vertical-align: middle;
}

Quelques astuces

Pour gagner en confort lors du travail graphique d’un tableau, il peut être intéressant d’utiliser les sélecteurs CSS numériques.

Si nous souhaitons alterner la couleur d’arrière plan des cellules par exemple, nous pourrons utiliser les sélecteur :nth-chil(odd) et :nth-child(even).

<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
  </tr>
  <tr>
    <td>Contenu 1</td>
    <td>Contenu 2</td>
  </tr>
  <tr>
    <td>Contenu 3</td>
    <td>Contenu 4</td>
  </tr>
</table>

tr:nth-child(odd) td {
  background-color: #f2f2f2;
}
tr:nth-child(even) td {
  background-color: #ffffff;
}

Dans certains cas, il sera nécessaire de cibler une colonne précise d’un tableau pour lui attribuer un aspect graphique spécifique. Nous pourrons utiliser le sélecteur :nth-chil(n).

<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
    <td>Colonne 3</td>
  </tr>
  <tr>
    <td>Contenu 1</td>
    <td>Contenu 2</td>
    <td>Contenu 3</td>
  </tr>
  <tr>
    <td>Contenu 4</td>
    <td>Contenu 5</td>
    <td>Contenu 6</td>
  </tr>
</table>

tr td:nth-child(2) {
  background-color: blue;
  color:white;
}