Tableaux 1 ère

Tableau simple sans grille

Code correspondant :

Explications :

Un tableau est créé par la balise TABLE.
La balise TR ajoute une ligne (R comme Row)
Les balises TD ajoutent des colonnes dans la ligne

Cliquer ici pour visualiser le fichier "tableau0.html" dont le code source figure ci-dessus.

Tableau simple avec grille

Pour ajouter une grille autour du tableau, il suffit d'ajouter le paramètre "BORDER" dans la balise "TABLE"

Essayez "tableau1.html"

Disposition des cellules

Pour faciliter la compréhension de la correspondance entre la place du texte d'une cellule dans le code et celle de la cellule à l'affichage, nous avons généré le tableau suivant :

Les "L" représentent les lignes, les "C" des colonnes. L2C3 est en ligne 2 colonne 3.

Fusionner des cellules par la balise COLSPAN

Dans le tableau ci-dessous, la première ligne s'étend (span) sur trois colonnes.
ce qui peut être obtenu par la balise COLSPAN : voir code plus bas.

Cliquer ici pour visualiser le fichier "tableau2.html" dont le code source figure ci-dessus.

Fusionner des cellules par la balise ROWSPAN

On veut obtenir ceci :

Voici le code (y voir la nouvelle balise ROWSPAN).

Cliquer ici pour visualiser le code ci-dessus.

Cases vides dans les tableaux avec grilles

Si on laisse une case vide : <TD>Rouge</TD><TD></TD>Jaune</TD>
certains explorateurs traitent mal la grille d'encadrement :

Le remède consiste à "remplir" la case vide par le "caractère de vacuité" : &nbsp;
<TD>Rouge</TD><TD>&nbsp</TD>Jaune</TD>

Cours suivant. Sommaire des cours HTML Page d'accueil