Logo dbcom
présente
Le petit guide HTML
Les tableaux

Les commandes de base des tableaux (tables)

 

Les bases

Les tableaux sont des éléments complexes et puissants. Un tableau se compose d'un ensemble de cases ou cellules, chacune pouvant contenir du texte et/ou une image. Les lignes du tableau peuvent avoir des hauteurs différentes, et les cellules peuvent avoir des largeurs différentes.

Un tableau est défini par les balises <TABLE> et </TABLE>. À la première balise, vous pouvez ajouter des commandes qui définissent les caractéristiques générales du tableau.

BORDER= Pour définir l'épaisseur des bordures, en pixels. Une bordure de 0 pixel est invisible
CELLSPACING= Pour définir la largeur de la gouttière (en pixels), bordure intérieure qui sépare les cellules
CELLPADDING= Pour définir une marge dans les cellules, pour éviter que le contenu des cellules s'affiche trop près des bordures
WIDTH= Pour définir la largeur du tableau, en pixels ou en pourcentage de la largeur de la fenêtre du visualiseur

Par exemple, les balises suivantes définissent un tableau avec une gouttière de 5 pixels, une largeur totale de 200 pixels et une bordure extérieure de 4 pixels.

<TABLE CELLSPACING=5 WIDTH=200 BORDER=4>

Un tableau peut avoir un titre, à définir entre les balises <CAPTION> et </CAPTION>. Le titre apparaît au-dessus de tableau, centré. Pour placer le titre sous le tableau, utilisez la commande ALIGN=BOTTOM dans la balise <CAPTION>.

 

Les lignes

Chaque ligne du tableau est définie séparément, avec les balises <TR> et </TR> (table rows). Chaque ligne (row) peut contenir plusieurs cellules. Le tableau se compose d'autant de couples <TR> et </TR> qu'il y aura de lignes.

Le langage HTML fait la distinction entre la ligne des en-têtes de colonnes (table header) et les lignes de données (table data).

<TH> </TH> Balises d'en-tête. Le texte apparaît en gras et centré au milieu de la cellule, horizontalement et verticalement. Chaque couple de balises correspond à une cellule d'en-tête de ligne ou de colonne.
<TD> </TD> Balises de données. Le texte est aligné à gauche, et est placé en haut de la cellule. Mais divers paramètres d'alignement permettent de modifier cette présentation. Chaque couple de balises correspond à une cellule de données.

 

Alignement des données dans les cellules du tableau

Pour chaque cellule, il est possible de définir des paramètres d'alignement. La commande ALIGN= gère l'alignement horizontal (à droite, centré ou à gauche), et la commande VALIGN= se charge de l'alignement vertical (en haut, au milieu, en bas).

ALIGN=LEFT
ALIGN=CENTER
ALIGN=RIGHT
Alignement horizontal (gauche, centré, droite).
VALIGN=TOP
VALIGN=MIDDLE
VALIGN=BOTTOM
Alignement vertical dans la cellule (en haut, centré, en bas).

 

Un exemple de tableau

Voici un exemple de tableau qui illustre les diverses possibilités de disposition de texte. La source est notée sous le tableau suivant :

Titre du tableau
Alignement par défaut pour le texte de cette cellule. Première cellule. Deuxième cellule de la première ligne.

Cette cellule contient plusieurs paragraphes de texte.

La disposition de ce texte est standard.

Troisième cellule du tableau, première cellule de la seconde ligne.

Le texte est centré et aligné en haut de la cellule.

Alignement à droite pour cette quatrième cellule.

Cet exemple étant peu élégant, voici un autre tableau :

Novembre 1998
Dim Lun Mar Mer Jeu Ven Sam
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

Ce calendrier introduit la section suivante, qui explique comment fusionner des cellules.


Autres paramètres de mise en forme du tableau

 

Fusionner des cellules

Le langage HTML a prévu que vous ne souhaiterez pas toujours afficher le même nombre de cellules dans toutes les lignes ou toutes les colonnes. Les commandes ROWSPAN= et COLSPAN= ont été prévues pour cela.

Ces commandes permettent d'indiquer combien de cellules vous souhaitez fusionner dans la ligne (ROWSPAN) ou la colonne (COLSPAN).

Un exemple simple :

Préparation des repas
MatinMidiGoûterSoir
Salles
1 et 2
LucetteAlexandra et EmmanuelleYvonnePaule
PauleYvonne et ChantalLucette
Salles
3 et 4
ChantalPauleYvonne
PauleYvonneChantalAlexandra

 

Des cellules vides

Vous pouvez créer des cellules vides en utilisant le couple de balises <TD> et </TD> sans texte entre les balises. La cellule s'affichera alors en relief. Si vous voulez créer une cellule vide à l'aspect enfoncé, placez le code &nbsp; (espace insécable) entre les balises.

 

Des couleurs (Microsoft Internet Explorer)

La commande BGCOLOR= ajoutée à la balise de définition du tableau ou d'une cellule permet d'appliquer une couleur au fond du tableau ou de la cellule.

La commande BORDERCOLOR=, ajoutée à la balise de définition du tableau, permet de définir une couleur de bordure.

La valeur à indiquer correspond aux trois chiffres hexadécimaux rouge, vert et bleu utilisés pour définir le fond de page Web. Par exemple, <TABLE BGCOLOR="#COCOCO" bordercolor="#FFFFFF" BORDER=1> appliquera un fond gris et une bordure blanche au tableau.

Le visualiseur de Microsoft permet de définir d'autres paramètres, qui ne sont pas encore affichés par tous les visualiseurs. Mais les autres produits ne sont pas sans qualités. Certains permettent d'afficher une image comme fond du tableau.

Il ne fait pas de doute que certaines de ces commandes s'imposeront.


Autres paramètres de mise en forme du texte

Vous avez la possibilité d'agir sur la mise en forme du texte dans les cellules, mais le résultat final varie légèrement d'un visualiseur à un autre.

Si vous ne voulez pas que le texte passe automatiquement à la ligne dans une cellule, ajoutez la commande NOWRAP à la balise <TD>.


Des tableaux très complexes

Toutes ces balises et tous ces codes peuvent être combinés pour créer des tableaux complexes.


Résumé


© Daniel Bédo. Tous droits réservés. Distribution commerciale ou publication strictement interdites sans autorisation écrite.

La diffusion de ce document sur Internet ou des serveurs BBS est autorisée, à condition qu'il le soit dans son intégralité et sans aucune modification. La diffusion sur des services en lignes commerciaux doit faire l'objet d'une autorisation de la part de l'auteur.

Les marques citées sont déposées par leurs propriétaires respectifs.

L'auteur dégage toute responsabilité en cas de dommages directs, indirects, accidentels ou consécutifs provenant d'informations erronées, et ce, même si l'auteur a été prévenu de la possibilité de tels dommages.



Site et pages créés par Daniel Bédo © 1997
Dernière mise à jour : le 17 avril 1997
dbcom@newel.net
http://www.oocities.org/BourbonStreet/7840/index.html

Votre site Web gratuit avec
GeoCities