Lecon 11 : Plus sur les tables

Ce titre  Plus sur les tables  sonnera peut-etre ennuyeux. Mais voyez le bon cote, si vous maitrisez les tables, plus rien concernant HTML ne sera inaccessible.

Que reste-t-il alors ?

Les deux attributs colspan et rowspan sont mis a profit pour creer des tables plaisantes.

Le terme  colspan  est l'abreviation de  column span  (N.d.T. recouvrement de colonne). L'attribut colspan est utilise dans la balise <td> pour indiquer combien de colonnes la cellule recouvre :

Exemple 1 :


<table border="1">
  <tr>
    <td colspan="3">Cellule 1</td>
  </tr>

  <tr>
    <td>Cellule 2</td>
    <td>Cellule 3</td>
    <td>Cellule 4</td>

  </tr>
</table>

Dans le navigateur, cela donne :

Cellule 1
Cellule 2 Cellule 3 Cellule 4

En fixant la valeur de l'attribut colspan a "3", la cellule dans la premiere rangee recouvre trois colonnes. Si nous avions fixee sa valeur a "2", la cellule ne recouvrirait que deux colonnes, et il aurait fallu inserer une cellule supplementaire dans la premiere rangee afin que le nombre de colonnes corresponde dans les deux rangees.

Exemple 2 :


<table border="1">
  <tr>
    <td colspan="2">Cellule 1</td>
    <td>Cellule 2</td>

  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>

    <td>Cellule 5</td>
  </tr>
</table>

Dans le navigateur, cela donne :

Cellule 1 Cellule 2
Cellule 3 Cellule 4 Cellule 5

Et pour rowspan ?

Comme vous l'avez peut-etre devine, l'attribut rowspan indique combien de rangees la cellule doit recouvrir :

Exemple 3 :


<table border="1">
  <tr>
    <td rowspan="3">Cellule 1</td>
    <td>Cellule 2</td>

  </tr>
  <tr>
    <td>Cellule 3</td>
  </tr>
  <tr>

    <td>Cellule 4</td>
  </tr>
</table>

Dans le navigateur, cela donne :

Cellule 1 Cellule 2
Cellule 3
Cellule 4

Dans l'exemple precedent, la valeur de rowspan est fixee a "3" dans la Cellule 1. Elle indique que la cellule doit recouvrir trois rangees (la sienne propre plus deux autres). Cellule 1 et Cellule 2 sont donc dans la meme rangee, tandis que Cellule 3 et Cellule 4 forment deux rangees independantes.

Embrouille ? Bon, ce n'est pas si simple et on perd facilement le fil. De fait, on serait bien inspire de dessiner la table sur un bout de papier avant de commencer le HTML.

C'est clair ? Alors allez-y et creez de votre chef quelques tables comportant a la fois des attributs colspan et rowspan.