Fusionner les cellules d'un tableau (attributs colspan et rowspan)

Retroussez vos manches, car le présent chapitre est très compliqué J'espère ne pas vous enquiquiner trop

• Introduction aux attributs XHTML rowspan et colspan

• Exemples de fusions de cellules

• Remarques importantes

Introduction aux attributs XHTML rowspan et colspan

Les deux attributs colspan et rowspan permettent respectivement de fusionner horizontalement et verticalement les cellules d'un tableau :

• l'attribut colspan : pour vous faciliter la mémorisation de cet attribut, on va le décortiquer : column (col) veut dire colonne en anglais, span (to span) signifie étendre. Bref l'attribut rowspan permet d'étendre horizontalement une cellule en fusionnant deux ou plusieurs colonnes. La fusion commence de la cellule 'td' (ou 'th') qui a reçu l'attribut colspan et s'étend horizontalement vers la gauche (fusion horizontale). Exemple :

• <td colspan="3">données sur trois cases fusionnées horizontalement</td>

  Dans ce cas on va relier la case courante (la case qui a reçu l'attribut colspan) avec les deux cases qui la suivent, c'est-à-dire celles qui se trouvent à gauche. Dans cet exemple, la fusion s'effectue horizontalement et concerne trois cases juxtaposées.

• l'attribut rowspan : row signifie ligne. Cet attribut permet d'étendre une cellule verticalement en fusionnant deux ou plusieurs lignes. La fusion commence de la cellule 'td' (ou 'th') qui a reçu l'attribut rowspan et s'étend verticalement vers le bas (fusion verticale). Exemple :

  <td rowspan="3">données sur trois cases fusionnées verticalement</td>

  Dans ce cas on va relier la case courante (la case qui a reçu l'attribut rowspan) avec les deux cases qui la suivent, c'est-à-dire celles qui se trouvent en bas. Dans cet exemple la fusion s'effectue verticalement et concerne trois cases superposées.

Exemples de fusions de cellules

Exemple 1

<table>
 <tr>
  <td colspan="2">
  2 cellules fusionnées
  horizontalement
  </td>
 </tr>
 <tr>
  <td>Bla Bla</td>
  <td>Bla Bla</td>
 </tr>
</table>

Dans cet exemple, on a fusionné les deux cellules de la première ligne (fusion horizontale). Remarquez bien la première balise 'tr', elle ne contient qu'une seule balise 'td' contrairement au deuxième tag 'tr' qui contient deux 'td'. C'est tout à fait logique, car la case fusionnée équivaut à 2 cellules (2 balises 'td').

Un tableau doit avoir le même nombre de cellules et ceci dans toutes les rangées. Mais lorsqu'il s'agit d'une fusion, il faut faire attention aux cellules reliées, car elles apparaissent sous forme d'une seule case, mais en fait le vrai nombre de cellules est exprimé dans la valeur affectée à l'attribut colspan.

Exemple 2

<table>
 <tr>
  <td rowspan="2">
  2 cellules fusionnées verticalement 
  </td>
  <td>Bla Bla </td>
 </tr>
 <tr>
  <td>Bla Bla </td>
 </tr>
</table>

Deuxième exemple : il s'agit d'une fusion verticale, dans ce cas les choses se compliquent un petit peu. Pour vous expliquez davantage j'ai crée le tableau suivant :

A droite il y a le tableau original, à gauche vous voyez le même tableau auquel j'ai ajouté trois repères (zone verte, bleue et jaune). En cas de fusion verticale, il faut distinguer trois zones : la partie 'cellule fusionnée' avec sa rangée complémentaire (vert), les rangées qui se trouvent à gauche de la cellule étendue et enfin les cellules normales.

• Le code XHTML de la zone verte qui comprend la cellule étendue verticalement et le reste de la première rangée qui se trouve à sa droite :

  <tr>
   <td rowspan="3">3 cellules fusionnées </td>
   <td>1A</td>
   <td>2A</td>
   <td>3A</td>
   <td>4A</td>
  </tr>

  Notez que cette zone est obtenue par la même balise 'tr'.

• Le code xhtml de la zone bleue c'est-à-dire, les autres rangées (2 et 3) qui se trouvent à gauche de la cellule étendue verticalement :

  <tr>
   <td>1B</td>
   <td>2B</td>
   <td>3B</td>
   <td>4B</td>
  </tr>
  <tr>
   <td>1C</td>
   <td>2C</td>
   <td>3C</td>
   <td>4C</td>
  </tr>

  Chaque ligne est introduite par 4 balises <td> et non pas 5, car ces rangées se situent à gauche des cellules fusionnées. En fait, chaque ligne incorporée dans une cellule, correspondra à un élément 'td' ou 'th' de moins dans les lignes suivantes, jusqu'au retour aux cellules normales.

• Le code xhtml de la zone jaune a repris la syntaxe normale :

  <tr>
   <td>cellule 4 normale </td>
   <td>1D</td>
   <td>2D</td>
   <td>3D</td>
   <td>4D</td>
  </tr>
  <tr>
   <td>cellule 5 normale </td>
   <td>1E</td>
   <td>2E</td>
   <td>3E</td>
   <td>4E</td>
  </tr>

  Maintenant on introduit 5 balises 'td', car on a dépassé les cellules fusionnées.

Exemple 3

<table border="2">
 <tr>
  <td rowspan="2">Sites</td>
  <td colspan="2">Performances</td>
 </tr>
 <tr>
  <td>Nombre visiteurs/jour </td>
  <td>PageRank</td>
 </tr>
 <tr>
  <td>www.monsite.com</td>
  <td>3000</td>
  <td>7/10</td>
 </tr>
</table>

Troisième exemple : on a réalisé les deux types de fusions (la case sites : fusion verticale, la case performances : fusion horizontale).

Exemple 4

<table>
 <tr>
  <td colspan="2" rowspan="2">
  case étendue sur quatre cellules 
  (2 horizontales x 2 verticales)
  </td>
  <td>Bla Bla </td>
 </tr>
 <tr>
  <td>Bla Bla </td>
 </tr>
 <tr>
  <td>Bla Bla </td>
  <td>Bla Bla </td>
  <td>Bla Bla </td>
 </tr>
</table>

Quatrième exemple : on a crée une cellule s'étendant sur deux cases horizontalement et verticalement.

Remarques importantes

• Les deux attributs cités en haut reçoivent toujours une valeur numérique qui détermine le nombre de cellules à fusionner.
• Seules les balises 'td' et 'th' qui reçoivent les deux attributs XHTML de fusion.
• Si vous avez fusionné dans une rangée de tableau par exemple quatre cellules horizontalement, vous devez définir dans les autres rangées du tableau quatre cellules et non pas une seule cellule. Ceci dit qu'on doit avoir le même nombre de colonnes dans chaque rangée du tableau.
• Vous pouvez attribuer à la fois les deux attributs colspan et rowspan à la balise <td> pour étendre une cellule sur plusieurs rangées et sur plusieurs colonnes.
• Le W3C n'a pas prévu des propriétés CSS qui peuvent remplacer les attributs colspan et rowspan. Car le fusionnement de cellule fait partie intégrante de la structure des tableaux, et n'a rien avoir avec la présentation.

On a fini avec les maudits tableaux, ouf Chouette, mais il nous reste une partie que vous allez tous adorer : habillage des tableaux avec les styles CSS.