Leçon 11 : Plus sur les tables
Ce titre « Plus sur les tables » sonnera peut-être ennuyeux. Mais voyez le bon côté, si vous maîtrisez les tables, plus rien concernant HTML ne sera inaccessible.
Que reste-t-il alors ?
Les deux attributs colspan et rowspan sont mis à profit pour créer des tables plaisantes.
Le terme « colspan » est l'abréviation de « column span » (N.d.T. recouvrement de colonne). L'attribut colspan
est utilisé 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 à "3", la cellule dans la première rangée recouvre trois colonnes.
Si nous avions fixée sa valeur à "2", la cellule ne recouvrirait que deux colonnes, et il aurait fallu insérer
une cellule supplémentaire dans la première rangée afin que le nombre de colonnes corresponde dans les deux rangées.
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-être deviné, l'attribut rowspan indique combien de rangées 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 précédent, la valeur de rowspan est fixée à "3" dans la Cellule 1. Elle indique que la cellule
doit recouvrir trois rangées (la sienne propre plus deux autres). Cellule 1 et Cellule 2 sont donc dans la même rangée,
tandis que Cellule 3 et Cellule 4 forment deux rangées indépendantes.
Embrouillé ? Bon, ce n'est pas si simple et on perd facilement le fil. De fait, on serait bien inspiré de dessiner la table sur un bout de papier avant de commencer le HTML.
C'est clair ? Alors allez-y et créez de votre chef quelques tables comportant à la fois des attributs colspan et rowspan.