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
.
Aucun commentaire: