Les tableaux en HTML

Nous avons déjà vu deux balises qui servent de conteneur à savoir <div> et <span>. C'est à dire qu'ils peuvent contenir d'autres balises afin de donner une structure au document. Mais j'ai précisé que ces deux balises ne servent pas à grand chose si nous ne les dotons pas de styles CSS. Cependant, il existe un autre objet HTML qui peut servir de conteneur sans être obligé de faire appel au CSS. C'est le tableau HTML.

Les tableaux peuvent servir de grille qui contient des données structurées en ligne et en colonne. Comme par exemple une liste d'articles avec leurs prix. Mais ils peuvent servir également de conteneurs qui renferment d'autres objet HTML afin de structurer sa page Web sous forme de cellules et faciliter ainsi la mise en page.

Pour créer un tableau nous avons besoin, au moins, de trois balises de base: <table>, <tr> et <td>.

Balise <table>

La balise <table> est le conteneur principal. Elle permet de déclarer un tableau et peut accueillir de nombreux attributs dont les plus fréquents sont:

• border: définit l’épaisseur de la bordure du tableau (et de ses cellules). Elle est exprimée en pixels (px) mais nous nous contentons de déclarer la valeur sans l'unité. Celle ci étant implicite et connue par le navigateur.
• width: définit la largeur du tableau. Elle est exprimé en pixel ou en pourcentage. Si on entend les pixels alors on met la valeur sans l'unité. Si c'est du pourcentage alors on met la valeur suivie du symbole %.
• height: définit la hauteur du tableau en pixel. Mais il vaut mieux ne pas déclarer cet attribut et laisser le tableau s'étirer en fonction de la taille de son contenu.
• bgcolor: désigne la couleur de l'arrière plan du tableau. Cette couleur est exprimée en nom anglais ou en code de couleur.
• cellspacing: signifie l'espacement entre les différentes cellules du tableau. Sa valeur est exprimée en pixel (implicite).
• cellpadding: définit la marge interne des cellules. Elle est exprimée en pixel (implicite).

Balise <tr>

Même si vous déclarez la balise <table> dans le code, rien ne s'affichera sur le navigateur. En effet, ce qui peut être affiché ce sont les cellules d'un tableau, et une cellule c'est au moins une ligne et une colonne.

La balise <tr> permet d'ajouter une ligne à un tableau. Elle est directement déclarée dans la balise <table>. Il y a donc autant de balises <tr> que de lignes.

La balise <tr> peut accueillir des attributs comme height ou bgcolor, mais la plupart des développeurs (y compris moi) préfèrent la déclarer sans attribut.

Balise <td>

La balise <td> représente une colonne. C'est elle en fait le vrai conteneur, car c'est elle qui peut accueillir du contenu. Elle est déclarée dans la balise <tr>. Si vous voulez avoir un tableau avec une ligne et deux colonnes, alors vous devez déclarer une balise <tr> et dans celle ci, deux balises <td>.

Si je vous ai conseillé de laisser la balise <tr> sans attributs, c'est parce que c'est la balise <td> qui doit en avoir. Les principaux attributs qu'on peut déclarer sur la balise <td> sont:

• width: définit la largeur de la colonne. Elle est exprimé en pixel ou en pourcentage par rapport à la largeur du tableau.
• height: définit la hauteur de la colonne en pixel.
• bgcolor: désigne la couleur de l'arrière plan de la colonne. Cette couleur est exprimée en nom anglais ou en code de couleur. Si la couleur d'arrière plan n'est pas déclarée, alors la colonne est transparente, et c'est la couleur de l'arrière plan du tableau qui sera visible.
• align: permet de spécifier l'alignement des objets contenus dans la colonne. Elle peut avoir une des valeurs: left (valeur par défaut), right, center ou justify.
• valign: défini l'alignement vertical des objets contenus dans la colonne. Elle peut avoir une des valeurs: middle (valeur par défaut), top ou bottom. Il existe aussi la valeur baseline qui signifie la ligne de base (son effet est proche de celle de la valeur bottom).

Exemple

Supposons qu'on veut créer un tableau qui affiche la liste du matériel informatique d'une petite entreprise avec leur quantité. Le code que je propose est le suivant:
Ce qui donne le résultat suivant:
Supposons maintenant qu'on veut ajouter un titre au tableau, et qu'on veut aussi donner un sens au contenu. Il existe d'autres balises qu'on peut déclarer.

Balise <caption>

La balise <caption> est déclarée directement après la balise <table>. Elle contient le titre du tableau et elle peut accueillir l'attribut align qui peut prendre une des valeurs suivante: top (valeur par défaut) permet d'avoir le titre en dessus du tableau et bottom permet d'avoir le titre en dessous du tableau.

Balise <thead>

La balise <thead> permet de déclarer les cellules d'entête. Elle est déclarée dans la balise <table> et peut contenir des lignes (balise <tr>) qui contiennent des colonnes (balise <td>). Les cellules d'entête sont incluses en haut.

Balise <th>

Quand la balise <thead> est déclarée, il est préférable de remplacer ses balises <td> par <th>. La balise <th> désigne donc une légende pour les colonnes d'entête.

Balise <tbody>

Il s'agit d'une balise qui est sensée accueillir les cellules du corps du tableau. <tbody> est déclarée dans la balise <table> est peut contenir les balises <tr> puis <td>.

Balise <tfoot>

Il s'agit d'une balise qui est sensée accueillir les cellules du pied du tableau. <tfoot> est déclarée dans la balise <table> après la balise <thead> est peut contenir les balises <tr> puis <td>. Les cellules de la balises <tfoot> sont automatiquement intégrées à la fin du tableau.

Exemple

Le tableau de l'exemple précédent peut être codé comme ceci:
Ce qui donne:

Fusionnement de cellules d'un tableau

Si on suppose qu'on veut créer un tableau qui contient deux lignes, et si la ligne du dessus contient deux colonnes, alors ce qu'on a fait jusqu'ici ne nous permet pas d'avoir un nombre différent de colonnes dans la ligne du dessous. Alors cette dernière ne peut comporter que deux colonnes si on tient à avoir un affichage correcte. Néanmoins, il existe des cas (d'ailleurs très nombreux) où on a besoin d'avoir un nombre de cellules différent dans chaque ligne. La solution magique est le fusionnement des cellules.

On peut fusionner les cellules horizontalement ou verticalement. Mais le plus fréquent c'est de fusionner à l'horizontale grâce à l'attribut colspan.

L'attribut colspan

L'attribut colspan est inclus dans la balise de colonne <td>. Il indique à celle ci combien de colonnes il faut fusionner pour en avoir qu'une seule à la fin.

Un exemple sera en mesure de clarifier les idées. Alors, supposons que je veux créer un tableau qui contient deux lignes et chaque ligne contient deux colonnes. Bien entendu, y a rien de nouveau à cela. Voici le code:
Ce code donne le résultat suivant:
Maintenant on ne veut garder dans la première ligne que la colonne qui contient le texte "Cellule 1". Il est donc évident qu'on va retirer la <td> qui contient le texte "Cellule 2", mais notre tableau sera déformé. Pour éviter ce problème, sur la colonne que l'on veut garder, on va ajouter l'attribut colspan auquel on va donner al valeur 2. Littéralement, ceci veut dire qu'on a fusionné 2 colonnes pour n'en avoir qu'une seule.
Voici le nouveau code:
Et voilà le résultat:

L'attribut rowspan

Si colspan fusionne les colonnes à l'horizontale, rowspan quant à elle, elle les fusionne à la verticale. Le principe est le même: Enlevez la (les) colonnes en plus, et sur celle qui reste mettez rowspan="le nombre de colonnes à fusionner".
Par exemple, avant le fusionnement:
Le résultat est:
Après le fusionnement des cellules 1 et 3 le code devient:
Ce qui donne le résultat suivant:
La page suit contient un exercice sur l'utilisation des tableaux pour diviser une page Web.

Les tableaux HTML en vidéo