Conception de pages pour un navigateur
Les balises pour les tableaux
Structure d'un tableau simple
Il existe plusieurs balises pour la structure d'un tableau :
<table>...</table>pour délimiter le tableau<tr>...</tr>pour délimiter chaque ligne au tableau<td>...</td>pour délimiter les cellules normales d'une ligne
Toutes les lignes doivent contenir le même nombre de cellules.
La structure d'un tableau sans en-tête est :
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
...
</table>
Structure d'un tableau avec des cellules d'en-tête en tête de ligne
Pour ajouter des cellules d'en-tête en tête de ligne, il suffit d'utiliser la balise <th>...</th> à la place de la balise <td>...</td> pour la cellute d'en-tête.
Structure d'un tableau avec fusions de cellules
Fusion de plusieurs cellules d'une ligne
Exemple :
<table style="width:200px">
<tr>
<td colspan="2">L1 C1</td>
</tr>
<tr>
<td>L2 C1</td>
<td>L2 C2</td>
</tr>
</table>
| L1 C1 | |
| L2 C1 | L2 C2 |
Remarque : chaque ligne contient toujours "virtuellement" le même nombre de cellules.
Fusion de plusieurs cellules de lignes différentes (fusion en colonne)
Exemple :
<table style="width:200px">
<tr>
<td>L1 C1</td>
<td rowspan="2">L1 C2</td>
</tr>
<tr>
<td>L2 C1</td>
</tr>
</table>
| L1 C1 | L1 C2 |
| L2 C1 |
Remarque : chaque ligne contient toujours "virtuellement" le même nombre de cellules.
Attributs des balises d'un tableau
Balise table
| Nom de l'attribut | Valeurs possibles | remarque |
|---|---|---|
cellpadding |
Valeur numérique en pixel (valeur par défaut : 2px) | Espace entre le contenu et les bordures des cellules |
cellspacing |
Valeur numérique en pixel (valeur par défaut : 2px) | Espaces entre les cellules du tableau |
Balise td
| Nom de l'attribut | Valeurs possibles | remarque |
|---|---|---|
| colspan | Valeur numérique (nombre de cellule) | Permet de fusionner des cellules adjacentes d'une même ligne |
| rowspan | Valeur numérique (nombre de cellule) | Permet de fusionner des cellules adjacentes d'une même colonne |
