Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Fusionner les cellules d'un tableau (attributs colspan et rowspan)

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

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

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>
2 cellules fusionnées horizontalement
Bla Bla Bla Bla

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>
2 cellules fusionnées verticalement Bla Bla
Bla Bla

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 :

relier les cellules des tableaux (attributs colspan et rowspan) relier les cellules des tableaux (attributs colspan et rowspan)

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.


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>
Sites Performances
Nombre visiteurs/jour PageRank
www.monsite.com 3000 7/10

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>
case étendue sur quatre cellules (2 horizontales x 2 verticales) Bla Bla
Bla Bla
Bla Bla Bla Bla Bla Bla

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

Remarques importantes

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.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau