Obligement - L'Amiga au maximum

Jeudi 21 septembre 2017 - 05:10  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Hit Parade
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles in other languages


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Moteurs de recherche
 · Pages de liens
 · Constructeurs matériels
 · Matériel
 · Autres sites de matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Développeurs logiciels
 · Logiciels
 · Développeurs de jeux
 · Jeux
 · Autres sites de jeux
 · Scène démo
 · Divers
 · Informatique générale


Jeux Amiga

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Trucs et astuces

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Glossaire

0, A, B, C, D, E, F,
G, H, I, J, K, L, M,
N, O, P, Q, R, S, T,
U, V, W, X, Y, Z


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Contact

David Brunet

Courriel

 


En pratique : HTML - les tableaux
(Article écrit par Denis Bucher et extrait d'Amiga News - avril 1998)


Nous allons enfin découvrir comment créer des tableaux : ceux-ci peuvent bien sûr être utilisés en tant que tels, mais ils permettent surtout de mettre en page votre site de manière très précise et compatible avec tous les navigateurs...

Lorsque tout est encore simple...

Rien n'est plus simple que de créer des tableaux ! Je les appellerai aussi parfois "tables" parce que c'est le terme utilisé par le HTML, et pour gagner de la place. Le principe de base est simple : il vous suffit d'introduire les cellules du tableau une par une, ligne par ligne. Exemple d'un tableau de trois lignes de quatre cellules chacune, que vous pouvez admirer sur la figure 1 :

<TABLE BORDER>
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
<TR><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD></TR>
<TR><TD>9</TD><TD>10</TD><TD>11</TD><TD>12</TD></TR>
</TABLE>

On délimite donc chaque cellule par <TD>...</TD> et chaque ligne de cellules par <TR>...</TR>. Une cellule peut contenir presque n'importe quoi.

HTML

Compliquons un peu !

Comment faire un tableau à trois colonnes, mais dans lequel à chaque case de la première colonne correspondent deux cases dans les seconde et troisième colonnes ? (figure 2).

HTML

Simple, en utilisant le principe du débordement. Pour qu'une case déborde sur la ligne en dessous, il faut lui ajouter ROWSPAN=2 (ROW = ligne) :

<TABLE BORDER>
<TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD></TR>
<TR><TD ROWSPAN=2>6</TD><TD>7</TD><TD>8</TD></TR>
<TR><TD>9</TD><TD>10</TD></TR>
</TABLE>

Vous constatez que les cases 1 et 6 prenant la place de la première case (4 et 9) de la ligne suivante, celle-ci est décalée d'une colonne vers la droite... Autrement dit, la première case d'une ligne se place toujours dans la première case libre. Si les lignes n'ont pas le même nombre de cases, un espace sans case apparaîtra à la fin de certaines lignes. Pour insérer une case vide, mettez simplement <TD></TD>.

Comment une case peut-elle prendre plus d'une colonne ? Simple aussi, avec COLSPAN=2 ! Dans l'exemple suivant, nous allons en plus donner un titre au tableau avec <CAPTION></CAPTION> (voir figure 1).

<TABLE BORDER>
<CAPTION>Exemple n°37</CAPTION>
<TR><TH>1</TH><TH>2</TH><TH>3</TH><TH>5</TH><TH>6</TH></TR>
<TR><TH>7</TH><TD COLSPAN=3 ROWSPAN=3>7</TD><TD>8</TD></TR>
<TR><TH>9</TH><TD>10</TD></TR>
<TR><TH>11</TH><TD>12</TD></TR>
</TABLE>

On y découvre aussi la balise <TH></TH> qui est un titre ("Header") de ligne ou de colonne lorsqu'il remplace <TD></TD>.

Toutes les options !

Voici les différentes options que vous pouvez donner à <TD> (ou à <TR> si ça doit s'appliquer à toute la ligne) :
  • ALIGN=LEFT,CENTER,RIGHT afin que le texte s'aligne dans la cellule, à gauche, au centre ou à droite.
  • BGCOLOR="#xxxxxx" couleur hexadécimale pour créer un fond plein.
  • BACKGROUND="image.gif" met une image de fond dans cette case.
  • VALIGN=TOP,MIDDLE,BOTTOM où placer le contenu de la cellule (haut, milieu ou bas). Ou encore VALIGN=BASELINE pour que tous les textes de la ligne soient alignés ensemble.
Certaines options sont réservées à <TD> :
  • WIDTH="nn" impose la largeur absolue de la case en pixels alors que WIDTH="nn%" impose sa largeur par rapport à la largeur du tableau.
  • NOWRAP la cellule sera créée suffisamment grande pour que le texte ne revienne pas à la ligne.
La balise <TABLE> prend lui aussi des options :
  • BORDER=nn l'épaisseur des bordures. NOBORDER (ou BORDER=0) crée une table sans bordures et BORDER des bords standards...
  • ALIGN=LEFT,CENTER,RIGHT indique où il faut placer le tableau sur la page.
  • CELLPADDING=nn indique la distance en pixels entre le contenu de la cellule et la bordure alors que CELLSPACING=nn indique la distance entre les cellules adjacentes, incluant d'éventuelles bordures.
  • BGCOLOR="#xxxxxx" a la même utilisation que ci-dessus.
Pour finir cette première partie, voici une bonne idée qui rendra vos tableaux vraiment plus beaux que ceux proposés en exemple. Créez-les avec NOBORDER, mais mettez des BGCOLOR pour chaque case avec des couleurs différentes mais proches, par exemple violet, rouge, bleu. Autre utilisation très pratique : créer un rectangle coloré sur une page munie d'une image de fond, ou mettre une partie de la page ou du texte en évidence. etc.

Les travailleurs de l'ombre

Comme nous l'avons vu plus haut, il suffit de mettre l'option <TABLE NOBORDER> pour rendre les bords de votre table invisible, et c'est là que tout devient très intéressant ! En effet, rien ne vous interdit de placer tout le contenu de votre page dans un tableau géant et donc de définir très précisément la position du contenu de votre page sans prendre le risque que l'aspect ne soit pas le même avec d'autres navigateurs ou sur d'autres machines. :-)

Les possibilités de ce moyen de procéder ne sont limités que par votre imagination... Vous pouvez d'ailleurs aussi introduire d'autres tableaux à l'intérieur des tableaux...

Voici deux exemples, il y en a beaucoup d'autres. L'idéal serait de mettre dans le premier des images pour les boutons, mais pour simplifier je n'ai mis ici que du texte. La figure 2 contient le résultat escompté mais les bordures y ont été ajoutées afin de vous montrer la logique qui se cache derriére. C'est à mon avis la seule solution lors de la création de vos tableaux de mise en page : ne changez BORDER en NOBORDER pour cacher les bordures que lorsque vous êtes entièrement satisfait...

<HTML><HEAD><TITLE>
Exemple n°30
</TITLE><BODY>
<H1>Un exemple concret</H1>
<P>
<TABLE NOBORDER WIDTH=100%>
<TR ALIGN=CENTER><TD>Infos</TD><TD>News</TD></TR>
<TR><BR></TR>
<TR ALIGN-CENTER><TD>Services</TD>
<TD>
<TABLE NOBORDER>
<TR><TD COLSPAN=2 ALIGN=CENTER>Contacts :</TD></TR>
<TR><TD>Commercial</TD><TD>Technique</TD></TR>
<TR><TD>Marketing</TD><TD>Divers...</TD></TR>
</TABLE></TD></TR>
</TABLE>
</BODY></HTML>

Le but du second exemple sera d'avoir une marge colorée à gauche (contenue dans l'image de fond et large de 150 à 155 pixels) sur laquelle reposeront des boutons. Le titre sera à cheval sur les deux et le reste se trouvera dans la partie blanche... Pour commencer, on réserve la première colonne aux boutons et on lui donne la même largeur en pixels que la marge. La deuxième colonne peut, elle, servir d'espace entre la première et la troisième... En plus des balises habituelles, la page commencera par le titre, puis ces deux tableaux imbriqués :

<TABLE BORDER WIDTH="100%">
<TR><TD WIDTH="135" VALIGN-TOP>
<TABLE WIDTH="100%" BORDER>
<TR ALIGN=CENTER><TD>
<IMG SRC-"Boutons1.GIF"></TD></TR>
<TR ALIGN=CENTER><TD>
<IMG SRC="Boutons2.GIF"></TD></TR>
<TR ALIGN=CENTER><TD>
<IMG SRC="Boutons3.GIF"></TD></TR>
<TR ALIGN=CENTER><TD>
<IMG SRC="Boutons4.GIF"></TD></TR>
<TR ALIGN=CENTER><TD>
<IMG SRC="Boutons5.GIF"></TD></TR>
</TABLE>
</TD>
<TD WIDTH=20></TD>
<TD>
Le reste de la page...<P>
</TD></TR>
</TABLE>

Vous pouvez admirer cela sur la figure 3 mais voici quelques explications supplémentaires :
  • La deuxième colonne doit être assez large car si les tableaux s'appuient parfois contre le bord de la fenêtre, il y a aussi quelques fois une petite marge...
  • Vous admirerez le VALIGN=TOP qui met le contenu du petit tableau tout en haut de la cellule et les ALIGN=CENTER qui placent les boutons au centre des cellules de notre plus petit tableau, donc aussi au centre de la première case du grand puisque le petit prend toute la largeur (WIDTH=100%).
HTML

Un bon conseil pour finir : c'est une bonne chose de redimensionner vos pages horizontalement et verticalement, et de voir si leur aspect reste le même quelle que soit la taille. Pensez aussi que certains navigateurs utilisent des caractères (donc des interlignes) de taille très variable...

Conclusion

Si j'espère que la première partie a été la plus claire possible, la seconde n'avait évidemment pour but que d'illustrer le principe et de donner des exemples : c'est donc maintenant à vous de mettre votre imagination à contribution !

Dès le mois prochain, une petite récréation, puisque c'est mon collègue Philippe Gaultier qui écrira à son tour quelques épisodes sur le JavaScript. Vous apprendrez notamment à rendre vos pages un peu plus vivantes... Nous nous retrouverons sans doute plus tard pour parler de concepts mystérieux comme des "client-side area maps", des "frames" et de toutes les idées que j'aurai eu d'ici là... N'hésitez pas à me poser des questions !


[Retour en haut] / [Retour aux articles]