Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

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.

Aidez la Communauté des Étudiants !