• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/01/2023

Ajoutez des tableaux

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Créez un tableau en HTML et CSS

La balise en paire <table> </table> indique le début et la fin d'un tableau. Cette balise est de type  block  , on va donc la placer en dehors d'un paragraphe ou d'une  div  .

Indiquez les valeurs du tableau avec les balises HTML  <tr>  et  <td> 

La balise tr désigne une ligne du tableau. La balise td désigne une cellule du tableau. La balise de ligne tr englobe les balises de cellule td qu'elle contient.

On a une balise de ligne  <tr>  qui englobe un groupe de cellules  <td>  .

Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :

<table>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>

Bon, le résultat est un peu déprimant :

Cela ne se voit pas tellement que c'est un tableau car les cellules n'ont pas de bordure.
Cela ne ressemble pas vraiment à un tableau

C'est un tableau, ça ? Le texte s'est écrit à la suite et il n'y a même pas de bordures…

Oui, un tableau HTML sans CSS paraît bien vide…

Ajoutez des bordures au tableau HTML grâce à la propriété CSS  border

Pour ajouter des bordures, on utilise le sélecteur CSS correspondant !

On utilise td pour sélectionner toutes les cellules des tableaux de la page. Donc pour créer des bordures à nos cellules, on fait :

td /* Toutes les cellules des tableaux... */
{
border: 1px solid black; /* auront une bordure de 1px */
}

Et voici le résultat juste en dessous :

Chaque cellule a sa propre bordure, donc cela ressemble davantage à un tableau.
Cela ressemble un peu plus à un tableau

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.

Collez les bordures du tableau HTML avec la propriété CSS  border-collapse

border-collapse est une propriété CSS qui permet de “coller les bordures entre elles”. Elle peut prendre deux valeurs :

  1. collapse  : les bordures seront collées entre elles, c'est l'effet qu'on recherche ici ;

  2. separate  : les bordures seront dissociées (valeur par défaut).

On écrit :

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

Ce qui nous permet d'obtenir :

Les bordures sont collées les unes aux autres, cela donne l'impression qu'il n'y a qu'une ligne entre deux cellules, donnant ainsi davantage l'apparence d'un tableau.
Cela ressemble encore plus à un tableau

Voilà qui est mieux !

Ajoutez une ligne d'en-tête au tableau avec la balise HTML  <th>

<table>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>

La ligne d'en-tête est très facile à reconnaître pour deux raisons :

  • les cellules sont des<th>  au lieu des  <td>  habituels ;

  • c'est la première ligne du tableau (c'est idiot, mais encore faut-il le préciser).

Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tête :

table {
border-collapse: collapse;
}
td, th /* Mettre une bordure sur les td ET les th */ {
border: 1px solid black;
}

Ce qui donne :

Une ligne d'en-tête a été ajoutée au tableau au-dessus de la première ligne. Par défaut et pour rendre l'en-tête plus lisible, elle est en gras.
Cela ressemble vraiment à un tableau

Donnez un titre au tableau avec la balise HTML  <caption>

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau. Notre exemple est constitué d'une liste de personnes… oui, mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, on est un peu perdu.

Heureusement, il y a <caption> pour ajouter un titre à notre tableau  !

Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui contient le titre du tableau :

<table>
<caption>Passagers du vol 377</caption>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>

Et voilà le résultat :

Le tableau a maintenant un titre qui a été placé par défaut au dessus de l'en-tête.
On comprend mieux l'objet de ce tableau

Bon mais on étouffe encore un peu avec ce tableau très compacte !

Oui d'ailleurs, comment on fait pour ajouter des marges dans un tableau, avec du  padding  ?

Exactement, et ça se fait côté CSS avec la propriété padding!

Ajoutez des marges à un tableau HTML avec la propriété CSS  padding

Pour correctement ajouter des marges à toutes nos cellules, y compris celles de l'en-tête, on va ajouter la propriété CSS  padding sur les sélecteurs  td  et  th  à la fois (comme on l'avait fait pour ajouter des bordures, souvenez-vous) :

td, th {
border: 1px solid black;
padding: 15px;
}

Et voilà le résultat avec une marge de 15 pixels :

Le texte des cellules n'apparait plus collé aux bordures, il y a une marge de 15 pixels entre l'extrémité du texte et les bordures.
Le tableau est plus aéré

C'est mieux !

Et comment on fait pour centrer un tableau ? Par défaut il est à gauche…

C'est simple, et ça se passe une fois de plus dans le fichier CSS, cette fois, au niveau du sélecteur  table !

Centrez un tableau HTML avec la propriété CSS  margin

Un peu plus haut dans le chapitre avait utilisé le sélecteur  table  pour ajouter la propriété CSS  border-collapse  qui nous permettait de "coller" les cellules entre elles.

C'est également sous le sélecteur  table  qu'on va indiquer au navigateur de centrer le tableau sur la page grâce à la propriété CSS  margin  , pour laquelle on va préciser la valeur auto:

table {
border-collapse: collapse;
margin: auto;
}

Voici ce que ça donne :

La propriété margin et la valeur auto ont pour effet de centrer le tableau sur l'axe horizontal de la page.
Le tableau est centré sur la page

Super ! Bon maintenant, voyons comment structurer un tableau un peu plus complexe. Nous avons appris à construire un petit tableau simple. Cela peut suffire dans la plupart des cas, mais vous aurez parfois besoin de réaliser des tableaux plus… complexes.

Structurez un grand tableau avec des balises HTML

Divisez un tableau avec les balises HTML  thead,  tbody et  tfoot

Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties. Pour cela, il existe des balises HTML qui permettent de définir les trois “zones” du tableau :

  1. l'en-tête du tableau (en haut) se définit avec les balises <thead></thead>  

  2. le corps du tableau (au centre) se définit avec les balises <tbody></tbody>  

  3. le pied du tableau (en bas) se définit avec les balises <tfoot></tfoot>

Ok d'accord, mais en fait, je vois bien ce qu'on peut mettre en en-tête et à l'intérieur du tableau, mais que mettre dans le pied de tableau ?

Vous pouvez par exemple y mettre un résumé, ou un total. Le pied de tableau se mettra, comme l'en-tête, par défaut, en gras :

On a ajouté un pied de tableau, qui répercute simplement le contenu de l'en-tête au bas du tableau.
Le tableau a un pied de tableau

Dans cet exemple de tableau, ce n'est pas forcément très parlant de mettre le même contenu dans l'en-tête et le pied du tableau. Mais cela peut être utile lorsqu'un tableau est très long.

Fusionnez des cellules du tableau avec les attributs colspan et rowspan

Pour fusionner des cellules entre elles, il suffit d'ajouter un attribut dans la balise HTML <td>. Cela permet d'indiquer le nombre de cellules à fusionner entre elles (la balise des cellules).

II existe deux attributs pour deux types de fusions différentes :

  1. l'attribut  colspan  permet de fusionner des colonnes : la fusion s'effectue horizontalement, aussi bien sur les lignes d'en-tête que sur le contenu lui-même. 

  2. l'attribut  rowspan  permet de fusionner des lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.

Voyons tout de suite à quoi cela peut ressembler :

Différents films sont classés par catégories de publics. Massacre à la tronçonneuse et The Ring conviennent à un public adolescent, ils partagent donc une cellule Oui, résultat d'une fusion de deux cellules répétitives. Idem pour le film Luck Luk
Un tableau avec des lignes et des colonnes fusionnées

À vous de jouer !

Vous allez maintenant pouvoir construire le tableau des tarifs de Robbie Lens !

Vous verrez que la base de code a été réorganisée :

  • le fichier CSS a été découpé en 4 fichiers CSS différents qui se trouvent dans le dossier  style ;

  • le fichier de base  style.css  est importé par chaque page ;

  • chaque page possède son propre fichier CSS.

Vous ajouterez les tarifs à la suite de la page "À propos", après le lien Call to action (appel à l’action).

Voilà à quoi le tableau devrait ressembler :

Le tableau présente le tarif de Robbie Lens selon la quantité de photos et la prestation choisie.
Le tableau des prix de Robbie Lens

En résumé

  • Un tableau s'insère avec la balise HTML  <table>  et se définit ligne par ligne avec  <tr>.

  • Chaque ligne comporte des cellules  <td>  (cellules normales) ou  <th>   (cellules d'en-tête).

  • Le titre du tableau se définit avec  <caption>.

  • On peut ajouter une bordure aux cellules du tableau HTML avec la propriété CSS border  . Pour coller les bordures entre elles, on utilise la propriété CSS  border-collapse.

  • Un tableau peut être divisé en trois sections grâce aux balises HTML <thead>  (en-tête),  <tbody>  (corps) et  <tfoot>  (bas du tableau). L'utilisation de ces balises n'est pas obligatoire.

  • En HTML, on peut fusionner des cellules horizontalement avec l'attribut  colspan, ou verticalement avec  rowspan. Il faut indiquer combien de cellules doivent être fusionnées.

Dans le chapitre suivant, on va apprendre à créer des formulaires. Alors à tout de suite !

Exemple de certificat de réussite
Exemple de certificat de réussite