 |
Vendredi 06 juin 2025 - 12:18 |
| Translate |
|
| Rubriques |
| Réseaux sociaux |
|
| Liste des jeux Amiga |
|
| Trucs et astuces |
|
| Glossaire |
|
| Galeries |
|
| Téléchargement |
|
| Liens |
|
| Partenaires |
|
| A Propos |
|
| Contact |
|
|
|
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.
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).
|
<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.
- 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.
- BORDER=nn l'épaisseur des bordures. NOBORDER (ou BORDER=0) crée une table sans bordures et BORDER des bords standard...
- 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.
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%).
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 cadres et de toutes les idées que j'aurai eu d'ici là... N'hésitez pas à me poser des questions !
|
