Utilisation de tableaux
On a souvent besoin de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes.
Les tableaux sont définis comme étant des suites de lignes.
Le tableau est encadré par les balises <table> et </table>.
Le titre du tableau est encadré par <caption> et </caption>.
Chaque ligne est encadrée par <tr> et </tr> (de l'anglais table row, traduisez par ligne du tableau).
Les cellules d'en-tête sont encadrées par <th> et </th> (de l'anglais table header : en-tête de tableau)
Les cellules de valeur sont encadrées par <td> et </td> (de l'anglais table data : donnée de tableau)
Exemple le tableau :
<table border="1">
<caption> Voici le titre du tableau </caption>
<tr>
<th> Titre A1 </th>
<th> Titre A2 </th>
<th> Titre A3 </th>
<th> Titre A4 </th>
</tr>
<tr>
<th> Titre B1 </th>
<td> Valeur B2 </td>
<td> Valeur B3 </td>
<td> Valeur B4 </td>
</tr>
</table>
Résultat suivant :
| Titre A1 | Titre A2 | Titre A3 | Titre A4 |
|---|---|---|---|
| Titre B1 | Valeur B2 | Valeur B3 | Valeur B4 |
Les attributs
| Attribut | Balises auxquelles il s'applique | Valeur | Effet Visuel |
|---|---|---|---|
align |
thead tbody th tr td |
center left right justify |
centré gauche droite justifié |
| caption | top bottom |
au-dessus en-dessous |
|
valign(alignement vertical) |
thead tbody th tr td |
top middle bottom |
en haut au milieu en bas |
border=n |
table | taille ou épaisseur de la bordure | |
cellpadding=n |
table | espacement de n pixels entre le contenu des cellules et son encadrement ou marge interieur des cellules | |
cellspacing=n |
table | Epaisseur de la grille intérieure ou espace entre deux cellules | |
float |
table | right left |
Spécifie la position du texte qui suivra </table> |
cols=n |
table | Spécifie le nombre de colonnes | |
frame(contrôle les éléments individuels d'encadrement du tableau) |
table | none top bottom topbot sides all |
aucun au-dessus en bas tout en haut sur les cotés tous |
rules(contrôle les éléments de la grille des cellules) |
table | none basic rows cols all |
aucun basique ligne colonne tous |
colspan |
thead tbody th tr td |
Fait déborder les cellules sur les colonnes adjacentes, sorte de fusion entre une cellule et la ou les cellules suivantes (à droite) | |
| rowspan | thead tbody th tr td |
Fait déborder les cellules sur les lignes adjacentes, sorte de fusion entre une cellule et la ou les cellules en dessous. |
Exemple utilisant l'attribut "colspan" :
| 2005 | |||||||||||
| Semestre 1 | Semestre 2 | ||||||||||
| trimestre 1 | trimestre 2 | trimestre 3 | trimestre 4 | ||||||||
| J | F | M | A | M | J | J | A | S | O | N | D |
Exemple utilisant l'attribut et "rowspan" :
| 2005 | semestre 1 | trimestre 1 | Janvier |
| Février | |||
| Mars | |||
| trimestre 2 | Avril | ||
| Mai | |||
| Juin | |||
| semestre 2 | trimestre 3 | Juillet | |
| Aout | |||
| Septembre | |||
| trimestre 4 | Octobre | ||
| novembre | |||
| Décembre |
Exemple de tableau :
| Association 1 | Association 2 | Association 3 |
|---|---|---|
| concernées: 55 Mio. individus |
concernées: 4 Mio. individus |
concernées: 1,5 Mio. individus |
| France | Belgique | Suisse |
| serpillière | wassingue | panosse |
| quatre-vingts | octante | huitante |