Flash-back
Il y a plusieurs mois, existait ici (sur mes pages), une rubrique que j'avais baptisée :
Aide pour la Réalisation des Pages Web.
Elle reprenait quelques notions sur le "langage HTML" et la façon de créer ses pages. On y trouvait aussi un "nuancier" qui permettait
de visualiser un certain nombre de couleurs avec leurs codes en RVB et en hexadécimal, une démo sur les fonds, un "mode d'emploi sur l'utilisation de cuteFTP...
J'avais abandonné cette partie, car il existe beaucoup de site qui donnent de très bonnes explications sur ce sujet. Et puis, comme il y a
toujours des débutants qui se lancent dans la création de leurs pages. Je me suis remis au travail pour essayer dans la mesure de mes quelques connaissances en la matière
d'aider ceux qui débutent à mieux comprendre certains aspects de la "fabrication" de pages web...
Je vous engage à répondre au sondage express (en bas de page) si cette page vous semble utile.
En pratique
Je ne reprendrais pas ici les "bases" de mise en forme de texte (bien qu'elles aient leur importance), ces questions n'étant pas à priori la difficulté principale de
ceux qui se lancent dans la mise en place d'une page. Mon e-mail reste toujours ouverte aux questions...
Comme il faut commencer par quelque-chose, j'ai opté pour quelques points de repères concernant les tableaux. Les tableaux sont très pratiques. Ils servent fréquement lorsqu'on veux
disposer des éléments dans une page web.
Comment créer un tableau ?
Pour commencer, il faut déclarer que nous voulons faire un tableau. Pour cela, nous utiliserons la balise ou tag <TABLE>. La fin du tableau sera signalée dans le document par </TABLE>. A l'intérieur
de cette balise, peuvent être définis (entre autres) la largeur du tableau et la largeur de la bordure. Nous allons voir plus bas comment utiliser le formatage. Dernière précision avant de voir à quoi ressemble
un tableau de visu : Un tableau est composé de colonnes et de lignes. Les "cases" du tableau sont nommées des cellules. Ces cellules sont déclarées avec le tag <TD>, la fin de la cellule est
matérialisée par </TD>. L'insertion d'un ligne (passage ligne suivante) se fait avec <TR>
Note : Les commentaires sont en rouges. Les "listings" sont en bleu
Les paramètre facultatifs sont en vert
Un premier tableau
Fig.1 - Bien que cela n'y ressemble pas trop, ceci est un tableau !
Les lignes correspondantes :
<TABLE>
<TD>1</TD><TD>2</TD>
<TR>
<TD>3</TD><TD>4</TD>
<TABLE>
Comme vous pouvez le constater, la présentation n'est pas géniale !
Améliorons !
Fig.2 - C'est déjà mieux, non ?
Le listing modifié :
<TABLE WIDTH=150 BORDER=2>
<TR>
<TD COLSPAN=2> TABLEAU</TD>
<TR>
<TD>1</TD><TD>2</TD>
<TR>
<TD>3</TD><TD>4</TD>
<TABLE>
L'encadrement du tableau est généré
par BORDER= . Plus le chiffre est grand, plus le bord est gros. Comme vous le voyez, le tableau
est plus large (il fait 150 pixels, le chiffre indiqué apres WIDTH=. Enfin le titre TABLEAU
à été ajouté. Pour que la cellule dans laquelle il se trouve prenne la
largeur des deux colonnes, on ajoute apres TD: COLSPAN=[nbre de colonnes à fusionner] (ici 2).
Mais comme on le constate le titre est aligné par défaut à gauche et il
est en caractère "normal". Un titre fait plus beau en caractère gras et centré ?
Si oui, on remplace TD par TH. La balise TH centre et met en gras le contenu de la cellule. C'est une balise
d'en-tête de tableau.
Fig.3 - Le même avec TH
Le contenu des autres cellules peut être centré aussi en ajoutant apres TD : ALIGN=CENTER. Voyons l'exemple.
Fig.3.1 - La première ligne est centrée.
Le listing est dessous.
Le principe est identique pour les autres cellules, je me limite à la première.
<TABLE WIDTH=150 BORDER=2>
<TR>
<TH COLSPAN=2> TABLEAU</TH>
<TR>
<TD ALIGN=CENTER>1</TD><TD ALIGN=CENTER>2</TD>
<TR>
<TD>3</TD><TD>4</TD>
<TABLE>
Un autre tableau :
| TITRE |
| Article 1 | Prix | Article 2 | Prix |
| Ref.a10 | 10 F | Ref.b12 | 10 F |
| Ref.a11 | 12 F | Ref.b15 | 11 F |
Fig.4 - On a ici un tableau sur 4 colonnes.
On constate que les articles de la première ligne sont au même prix.
Nous pouvons éviter de retaper deux fois 10 F.
Comme ceci :
| TITRE |
| Article 1 | Prix | Article 2 | Prix |
| Ref.a10 | 10 F | Ref.a11 | 12 F |
| Ref.b12 | Ref.b15 | 11 F |
Fig.4.1 - Il suffit de modifier un poil, et d'utiliser ROWSPAN
<TABLE WIDTH=50% BORDER=4>
<TR>
<TH COLSPAN=4>TITRE</TH>
<TR>
<TD ALIGN=CENTER>Article 1</TD><TD ALIGN=CENTER>Prix</TD><TD ALIGN=CENTER>Article 2</TD><TD ALIGN=CENTER>Prix</TD>
<TR>
<TD>Ref.a10</TD><TD ROWSPAN=2>10 F</TD><TD>Ref.a11</TD><TD>12 F</TD>
<TR>
<TD>Ref.b12</TD><TD>Ref.b15</TD><TD>11 F</TD>
<TABLE>
Bien évidement pour un tableau de deux lignes, le fusionnement de lignes n'est pas indispensable. Mais si vous avez 20 ou trente lignes avec la même chose,
cela devient plus utile !
Ce qu'on peut mettre dans le balise <TABLE> :
<TABLE WIDTH=[xx],[xx%] BORDER=x CELLPADDING=x CELLSPACING=x >
Ce qu'on peut mettre dans le balise <TD> :
<TD WIDTH=[xx],[xx%] ALIGN=[center],[left],[right] COLSPAN=x ROWSPAN=x >
Un exemple de ce que donnent CELLPADDING et CELLSPACING.
| TITRE |
| Article 1 | Prix | Article 2 | Prix |
| Ref.a10 | 10 F | Ref.b12 | 10 F |
| Ref.a11 | 12 F | Ref.b15 | 11 F |
Fig.5 - Ici le tableau de la Fig.4 avec CELLPADDING=5.(les cellules sont plus aérées)
La largeur de bordure (BORDER) a été ramené à 1.
| TITRE |
| Article 1 | Prix | Article 2 | Prix |
| Ref.a10 | 10 F | Ref.b12 | 10 F |
| Ref.a11 | 12 F | Ref.b15 | 11 F |
Fig.5.1 - Le rajout de CELLSPACING=5 agrandit l'espace entre les cellules.
Le listing de ce tableau est ci-dessous
<TABLE WIDTH=50% BORDER=1 CELLPADDING=5 CELLSPACING=5>
<TR>
<TH COLSPAN=4>TITRE</TH>
<TR>
<TD ALIGN=CENTER>Article 1</TD><TD ALIGN=CENTER>Prix</TD><TD ALIGN=CENTER>Article 2</TD><TD ALIGN=CENTER>Prix</TD>
<TR>
<TD>Ref.a10</TD><TD ROWSPAN=2>10 F</TD><TD>Ref.a11</TD><TD>12 F</TD>
<TR>
<TD>Ref.b12</TD><TD>Ref.b15</TD><TD>11 F</TD>
<TABLE>
Ces exemples utilisent du texte et des chiffres dans les les cellules. Il est bien entendu possible de positionner de la même façon des images à
l'intérieur des balises <TD> </TD>. (dans ce cas, on pourra si l'on désire, omettre la déclaration de la bordure).
Vous avez remarqué que depuis la figure 4, la largeur des tableaux est déclarée en pourcentage et non plus en pixels. L'avantage de l'utilisation
de valeur en pourcentage réside dans le fait que suivant la largeur d'affichage disponible, le tableau ne prendra que la portion (en %) de la largeur totale de
la fenêtre. Cela peut aussi devenir un inconvénient, suivant la nature de ce qui se trouve dans les cellules. Si vous voulez que votre tableau reste aux dimensions
que vous lui fixez, quelque soit les possibilités d'affichage des moniteurs de vos visiteurs, vous devrez déclarer vos dimensions en pixels.
Astuce
Lorsqu'on créé un tableau, on ne rempli pas toujours l'intégralité des cellules (tout simplement parce qu'il n'y à rien a mettre
dans certaines de ces cellules). Dans ce ces nous obtenons quelque chose comme ce tableau ci-dessous...
| Références |
| REF | DISPO | DELAI |
| 1254 | O | 5J |
| 1255 | O | 3J |
| 1256 | N | |
| 1257 | O | 8J |
| 1258 | N | |
| 1259 | O | 2J |
Vous remarquez que les REF 1256 et 1258, sont non dispo, donc les cellules sont vides.
Celles-ci donnent des carrés non entourés qui peuvent paraître peu jolis.
La solution que nous pouvons envisager serait de mettre un tiret ou un point dans la cellule. Mais nous pouvons aussi la laisser vide, et obliger le navigateur a encadrer ces cellules.
Comme ceci :
| Références |
| REF | DISPO | DELAI |
| 1254 | O | 5J |
| 1255 | O | 3J |
| 1256 | N | |
| 1257 | O | 8J |
| 1258 | N | |
| 1259 | O | 2J |
Ce résultat est obtenu en positionnant dans la cellule :
le caractère"  ".
La syntaxe :
<TD>   </TD>
C'est plus joli, non ?
