Un tableau est organisé en lignes elles-mêmes organisées en cellules. La structure s'articule donc autour de trois balises :
qui affiche :
| ligne 1 colonne 1 | ligne 1 colonne 2 | ligne 1 colonne 3 |
| ligne 2 colonne 1 | ligne 2 colonne 2 | ligne 2 colonne 3 |
Remarquons que ne nombre d'éléments <td> au sein des éléments <tr> doit rester le même dans la mesure ou chaque ligne possède un même nombre de cellules, nombre qui correspond au nombre de colonnes du tableau.
Pour rendre les bordures de cellules visibles on a recours à l'attribut border ou, plus judicieusement, à une propriété CSS.
Certaines balises <td> peuvent être remplaçées par la balise <th> qui marque une cellule de titre (table head)
qui affiche :
| titre 1 | titre 2 | titre 3 |
|---|---|---|
| ligne 2 colonne 1 | ligne 2 colonne 2 | ligne 2 colonne 3 |
On utilise l'attribut colspan au sein d'une balise <td> ou <th>. La valeur numérique de cet attribut précise le nombre de colonnes du tableau que couvre la cellule.
qui affiche :
| titre 1 | ||
|---|---|---|
| ligne 2 colonne 1 | ligne 2 colonne 2 | ligne 2 colonne 3 |
Les trois cellules de la première ligne sont fusionnées.
Autre exemple :
qui affiche :
| ligne 1 colonne 1 et 2 | ligne 1 colonne 3 | ligne 1 colonne 4 | |
| ligne 2 colonne 1 2 et 3 | ligne 2 colonne 4 | ||
| ligne 3 colonne 1 | ligne 3 colonne 2 et 3 | ligne 3 colonne 4 | |
| ligne 3 colonne 1 | ligne 3 colonne 2 | ligne 3 colonne 3 | ligne 3 colonne 4 |
Bien évidement, par défaut, lorsque l'attribut colspan n'est pas précisé il vaut 1 (la cellule porte sur une colonne et il n'y a donc pas fusion).
La règle qui impose un même nombre de balises <td> au sein d'une ligne <tr> se généralise ainsi : la somme des valeurs des attributs colspan (valeur=1 par défaut) doit être la même pour toutes les balises <tr> d'une table.
On utilise l'attribut rowspan au sein d'une balise <td> ou <th>. La valeur numérique de cet attribut précise le nombre de lignes du tableau que couvre la cellule.
<tr>
qui affiche :
| ligne 1 et 2 colonne 1 | ligne 1 colonne 2 | ligne 1 2 et 3 colonne 3 | ligne 1 colonne 4 |
| ligne 2 et 3 colonne 2 | ligne 2 colonne 4 | ||
| ligne 3 colonne 1 | ligne 3 colonne 4 | ||
| ligne 4 colonne 1 | ligne 4 colonne 2 | ligne 4 colonne 3 | ligne 4 colonne 4 |
Lorsque l'attribut rowspan n'est pas précisé il vaut 1 (la cellule porte sur une ligne et il n'y a donc pas fusion).
Il est possible de définir un tableau en trois parties :
Chacune des trois parties est constituée d'une suite de lignes <tr>. L'utilité d'une telle distinction est de permettre une mise en forme propre à chaque partie.
qui affiche :
| entête 1 | entête 2 | entête 3 |
| bas 1 | bas 2 | bas 3 |
| ligne 1 colonne 1 | ligne 1 colonne 2 | ligne 1 colonne 3 |
| ligne 2 colonne 1 | ligne 2 colonne 2 | ligne 2 colonne 3 |
Copyright Gabriel Braun 2007