Vous vous souvenez en début de chapitre quand je vous avais dit que chaque ligne devait comporter exactement le même nombre de cellule ?
Et bien ce n'est pas tout à fait vrai, nous allons voir ici et aujourd'hui les cas exceptionnels qui vous permettent d'avoir des lignes ou des colonnes avec un nombre différent de cellules.
Pour cela on va utiliser ce que l'on appelle communément la fusion des cellules.
Pour vous aider à visualiser ça imaginez que vous avez un tableau de trois lignes etque ces trois lignes comportent chacune trois cellules. On a donc un tableau de trois lignes et trois colonnes.
Il est possible de dire à l'ordinateur que l'on veut par exemple qu'une cellule de la troisième ligne ne fasse pas la largeur d'une colonne mais de deux ! Il faudra alors que la troisième ligne n'ait que deux cellules, une de largeur normale et une de largeur double.
Pour vous aider à mieux comprendre je vais vous montrer cet exemple en live.
Regardez ce tableau :
Nom
Prénom
Âge
Johnson
Johnson
20 ans
Johnson
20 ans
Comme vous le voyez les deux lignes veulent dire exactement la même chose, sauf que vu que la personne a le même prénom et nom on a décidé de combiner ces deux cellules.
Sachez que l'on peut aussi le faire verticalement. Imaginons que l'on veuille fusionner les cellules de son âge (qui est le même vu qu'il s'agit pré-supposément de la même personne) ?
On fait comme ceci :
Nom
Prénom
Âge
Johnson
Johnson
20 ans
Johnson
Johnson
Et voilà le travail !
Dans ces exemples on l'a fait avec deux cellules, mais on peut fusionner un nombre illimité de cellules.
Maintenant que l'on a vu les exemples, il est temps de voir quelles sont les attributs HTML qui permettent de faire ça.
Ce sont deux attributs HTML qui se placent sur les balises de cellules, sur les <td> ou <th> donc.
Voici les deux attributs :
colspan : pour fusionner les cellules horizontalement
rowspan : pour fusionner les cellules verticalement
À ces attributs vous devez leur donner une valeur numérique. Par défaut elles valent 1, mais si vous voulez qu'une cellule prenne deux lignes ou deux colonnes vous devez mettre 2 et ainsi de suite.
Lorsque l'on fusionne des cellules que ce soit horizontalement ou verticalement, il faut garder à l'esprit que la prochaine ligne ou colonne aura logiquement une cellule (ou plus) en moins.