Les tableaux ont été employés durant une decennie très loin
de leur fonction d'origine, comme conteneurs pour obtenir des mises en
page précises et stables. C'est pourquoi vous les croiserez souvent
dans les pages de code source. Ils sont désormais, officiellement,
obsolètes.
Mais un certain de nombre de webdesigners y ont encore
recours en cas de problème. N'oublions pas que
désormais c'est au css de donner ses aspects visuels au tableau. On
doit donc limiter au maximum les instructions de formes ci-dessous qui
se rattachent au vieil HTML 4, et les poser dans la partie head de la page ou dans la feuille de style externe:
table {table layout: auto;}
td { border-collapse: collapse, separate ; border-spacing: 0,5em;
empty-cells: show/hide; vertical-align: baseline, top, bottom, middle;}
Le tableau a permis un temps une mise en page totalement contrôlée.
Ses cellules peuvent contenir tous les éléments
disponibles: texte, liens, images... On a découvert à l'usage que faire des mises-à-jour y était très compliqué, pas assez structurel.
<table> (ouvrir table)< tr> (première rangée (table-row))<td> première cellule </td> <td>deuxième cellule </td> <td> troisième
cellule </td> (fermer première rangée)</table> (fermer table) |
les tags du tableau demandent aussi à être refermés. <tr> </tr> ouvre et referme une rangée(Table Row) dans le tableau
<td> </td> ouvre et referme une cellule dans la rangée.
Dans le premier exemple de code ci-dessus sont donc ouvertes 3 cellules. En voici le résultat :
| première cellule | deuxième cellule | troisième cellule |
par exemple lui attribuer une largeur de 100% de la page en ajoutant width="100%" dans le tag <table>
| première cellule | deuxième cellule | troisième cellule |
par exemple lui attribuer une hauteur de 100 pixels en ajoutant height="100" dans le premier tag <td> (les autres suivront l'exemple)
| première cellule | deuxième cellule | troisième cellule |
ou lui donner plusieurs rangées successives
en copiant-collant la première :
| première cellule | deuxième cellule | troisième cellule |
| quatrième cellule | cinquième cellule | sixième cellule |
| septième cellule | huitième cellule | neuvième cellule |
| dixième cellule | onzième cellule | douzième cellule |
Mais encore en utilisant bgcolor="pink" dans le tag <tr>
attribuer une couleur de fond à la rangée de cellules...
| première cellule | deuxième cellule | troisième cellule |
...et même à deux cellules sur 3 en l'utilisant dans le tag <td>
(consulter le code source de cette page pour voir dans le détail).
| première cellule | deuxième cellule | troisième cellule |
Ce n'est pas fini : voici l'instruction cellspacing="..." qui détermine un espace (ici 30 pixels) entre les cellules...
| première cellule | deuxième cellule | troisième cellule |
...et cellpadding qui donne une marge
intérieure à la cellule, empêchant le contenu de
l'occuper entièrement, mais visualisant la cellule
entière :
| première cellulepremièrecellulepremière cellulepremière cellulepremièrecellulepremièrecellule | deuxième cellule | troisième cellule |
On devine le parti à en tirer pour positionner des éléments dans une page,
surtout que l'instruction border="0" dans le tag <table> peut faire disparaître visuellement les bordures du tableau... tout en le conservant pour son rôle de contenant ou structure :
| premièrecellulepremièrecellulepremièrecellule premièrecellulepremièrecellulepremièrecellule | deuxième cellule | troisième cellule |
un exemple classique d'utilisation du tableau "invisible" : les photos assemblées de la page #3/images : regarder le code source./p>
En plus, nous pouvons positionner le contenu de chaque cellule (image, texte) en utilisant
le tag < align="left | center | right"> dans chaque cellule, entre <td>et</td>>:
Si l'on ne précise rien l'alignement par défault est "left", comme dans tous les exemples ci-dessus.Voici un alignement des contenus des cellule centré:
première cellule deuxième cellule troisième cellule ... et aligné à droite :
premièrecellule deuxième cellule troisième cellule ...convergent, alignement vertical au milieu :
• / \ • ...divergent, alignement vertical en haut pour les "puces", en bas pour les séparateurs :
• | | • voici le code des 3 premières cellules de ce tableau. <table border="1" cellspacing="0" cellpadding="6"><tr bgcolor="tan"><td height="100" align="left" valign="top" width="100"><font size="48" color="brown">• </font></td><td align="center" valign="bottom" width="100"><font size="48" color="brown">| |</font></td><td align="right" valign="top" width="100"><font size="48" color="brown">• </font></td></tr></table>
( Pour la construction de cette quatrième cellule, regarder dans le code source de la page)
un exemple radical d'utilisation de
<align>et<valign>: positionner un "timbre-poste" au centre d'une cellule...qui correspond à la totalité de la page [voir] .
Récréation : un exemple amusant sur la structure du tableau : donnez un coup de souris dans la porte, pour voir... :-)
à vous de jouer
AD LIB...