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 :

 

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

 

 

 

  Valid XHTML 1.0 Transitional   Valid CCS

ostralo.net