HTML permet de réaliser des tableaux avec réglage de l'encadrement, de la taille et de l'espacement des cellules. Cette leçon décrit les
principales balises permettant de présenter un tableau.
La définition de la structure d'un tableau est tout à fait comparable à celle des listes que nous avons vu jusqu'à présent. On définit une balise de début
de tableau, puis on décrit le tableau ligne par ligne et enfin, on indique la balise de fin de tableau. Cette structure est suffisamment simple pour que le tableau soit facile à maintenir
(modification du nombre de lignes et de colonnes).
Une cellule peut contenir les éléments suivants :
Texte
Listes
Images
Liens hypertextuel
Éléments de formulaire que l'on verra dans la prochaine leçon.
<TABLE> :
La balise <TABLE> permet l'ouverture d'un tableau et la balise de fin de tableau est spécifiée par </TABLE>. On peut indiquer les attributs suivants : BORDER, CELLPADDING, CELLSPACING, la valeur de ces attributs
est spécifiée en point (pixels). Leur spécification est indiquée à la figure 1 ci-dessus.
Un attribut supplémentaire permet de contraindre le tableau à occuper un certain pourcentage de la largeur de la fenêtre du browser. Il s'agit de l'attribut WIDTH.
La balise <TR> débute une ligne du tableau qui sera terminée par une balise de fin </TR>. Elle admet l'attribut VALIGN, pour obtenir
un alignement du texte dans le sens vertical de la cellule, ALIGN pour l'alignement horizontal. Ces attributs d'alignement s'appliquent pour toutes les cellules de la ligne, sauf si un attribut de <TD> vient contredire
l'alignement.
Les valeurs prises par les attributs d'alignement peuvent être : TOP (haut), BOTTOM (bas), MIDDLE (centrage vertical), RIGHT (droite), CENTER (centré horizontalement),
LEFT (gauche). Ceci est valable pour l'ensemble des balises.
La balise <TD> délimite le début d'une cellule. Elle admet l'attribut VALIGN, pour obtenir un alignement du texte
dans le sens vertical de la cellule, ALIGN pour l'alignement horizontal, COLSPAN pour définir une cellule dont la largeur est un multiple de la colonne de base, et ROWSPAN pour définir
une cellule dont la hauteur est un multiple de la ligne (voir illustration de l'utilisation de rowspan et colspan, ci-dessous figure 2.
Dans les tableaux, l'ajustement de la taille des cellules est automatique, la largeur d'une cellule dépend du plus long texte inscrit dans une des cellules de la colonne.
Par défaut, si la ligne est trop longue (> 64 caractères) très dépendant du browser mais ce dernier, la coupe en plusieurs lignes selon les navigateurs.
L'attribut NOWRAP de la balise <TD> force le browser à inscrire tout le texte de la cellule sur une seule ligne.
Remarquez bien que le tableau est construit sur une matrice de 5 par 3, et que l'on obtient des cases vides, en faisant suivre deux balises <TD> <TD>
<TH> :
La balise <TH> est identique à <TD>, mais le texte des cellules est considéré comme du texte d'en-tête. Il est automatiquement centré et est mis en caractères gras. Cette balise
admet les mêmes paramètres que la balise <TD> (valign, align, colspan, rowspan, nowrap).
Cet attribut, selon qu'il est appliqué à la balise <TABLE>, à la balise <TR> ou à la balise <TD>, permet de donner
une couleur de fond à un tableau, une ligne, ou à une cellule d'un tableau. La couleur est codée selon le modèle RGB.
Exemple de tableau intégrant divers éléments :
Exemple d'utilisation d'un tableau intégrant divers éléments N° 9 :
Ce dernier exemple N° 9, nous avons créé deux pages HTML identiques, les codes restent les mêmes mis à part, le <TITLE> et <A HREF> qu'il faudra changer vos URL et selon vos besoins car, ce ne sont uniquement que des exemples.
Et enfin, nous allons résumer nos leçons des tableaux comme ci-après :
Résumé :
Un tableau quelconque se définit entre les balises <TABLE> et </TABLE>.
A l'intérieur de la première balise, on règle la présentation générale du tableau à l'aide de trois attributs :
BORDER définit l'épaisseur du cadre extérieur,
CELLPADDING définit l'espace autour du texte d'une cellule,
CELLSPACING définit l'espace entre les cellules,
WIDTH définit la largeur du tableau relativement à la largeur de la fenêtre du browser.
Le tableau est ensuite décrit ligne par ligne. L'élément définissant une nouvelle ligne est <TR>, qui admet les attributs d'alignement du texte à l'intérieur de toutes les cellules de la ligne :
VALIGN (Alignement vertical) peut prendre les valeurs suivantes :
TOP place le texte en haut de la cellule,
BOTTOM place le texte en bas de la cellule,
MIDDLE place le texte au centre de la cellule,
ALIGN (Alignement horizontal) peut prendre les valeurs suivantes :
RIGHT place le texte à droite de la cellule,
LEFT place le texte à gauche de la cellule,
CENTER place le texte au centre de la cellule,
</TR> termine la définition d'une ligne,
<TD> est l'élément de départ d'une colonne. Il peut être complété par des attributs VALIGN et ALIGN, qui seront alors prioritaires sur les mêmes valeurs définies dans la balise <TR>.
Deux attributs supplémentaires , COLSPAN et ROWSPAN, permettent de générer des cellules dont la surface est un multiple de la cellule élémentaire. La matrice du tableau définissant
le nombre de cellules élémentaires est calculée par le nombre de lignes du tableau (nombre d'instructions <TR>), multiplié par le nombre de cellules (nombre d'instructions <TD> de la ligne définissant le plus de cellules (plus grand nombre de <TD>).
Le nombre de cellules par ligne du tableau est calculé sur la ligne définissant le plus de cellules.
Le dernier attribut de <TD> est NOWRAP, qui empêche de diviser le texte de la cellule en plusieurs lignes.
Enfin, la balise <TH> est une balise fonctionnant de façon similaire à la balise <TD>; elle admet les mêmes attributs, mais est considérée comme balise de titre d'une cellule. Le centrage
du texte et l'utilisation de caractères gras sont automatiques.
Un tableau peut recevoir un titre défini entre les balises <CAPTION> et </CAPTION>. Ce titre peut se situer au-dessus (attribut ALIGN avec la valeur TOP) ou en dessous (ALIGN avec la valeur BOTTOM).
On peut affecter une couleur à un tableau, une ligne ou une colonne à l'aide de l'attribut BGCOLOR.
Fin de cette douzième leçon, la prochaine sera consacrée aux frames concernant le langage HTML.
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page