 |
 Utilisation des tableaux pour la mise en page
|
|
|
|
Connexion ratee
|
|
Contrairement à un livre, un navigateur peut faire varier la taille de sa zone
d'affichage à la volée. D'où le fait que par défaut, si vous tapez un texte, il se
déroulera depuis la marge de gauche, jusqu'à la marge de droite pour revenir à la ligne et
recommencer ainsi jusqu'à une 'marque de fin de paragraphe' ordonnant le retour à la ligne.
Ce qui donne ce que vous avez déjà vu sur certaines pages, des textes difficiles à lire, pauvres
en terme de présentation et surtout s'étalant sur la totalité de la largeur de la page.
Comme nous sommes habitués à la lecture des journaux et magazines qui proposent en général
la lecture des pages sur plusieures colonnes, nous allons faire de même sur les pages web. |
|
|
|
|
|
Si vous ne pouvez pas (ou difficiliement) intervenir sur la largeur de la fenêtre du navigateur de votre visiteur,
vous pouvez par contre intervenir sur la largeur d'un tableau dans votre page.
La plupart des ordinateurs connectés à l'Internet aujourd'hui affichant sur une largeur de 800 pixels,
il faut donc comme référence cette largeur pour votre tableau, prenant soin de la réduire un peu
pour laisser la place à l'ascenceur vertical.
Ici nous ferons 'plus petit' pour que l'exemple reste dans les petits cadres bleus ;-).
Le principe est très simple : pour afficher 2 colonnes de texte, nous utiliserons un tableau de... 3 colonnes !
Pourquoi 3 colonnes ? 2 pour le texte et une troisième au centre pour matérialiser une séparation
entre les deux colonnes de texte.
Attention : les navigateurs et le HTML ne sont pas des applications ou langage de mise en page intelligents. Cela
signifie que votre texte ne s'équilibreara pas tout seul entre les colonnes où vous souhaitez le placer.
Ce sera à vous de taper une certaine quantité de texte dans la première colonne puis l'autre partie
dans la seconde. Il vous faudra donc faire quelques 'réglages' pour équilibrer vos colonnes.
De plus, le placement du contenu d'une cellule est par défaut centré verticalement. Si vous avez une
colonne plus chargé que l'autre, la colonne la moins remplie va se centrer verticalement, et donc le haut du texte
ne sera pas calé comme le haut du texte de la colonne la plus remplie. Pour y remédier, placez dans vos
balises de cellule l'attribut 'valign' (pour 'alignement vertical') avec pour valeur
'top' (pour 'haut'). Ainsi, le contenu de chaque cellule sera aligné en haut, ne
laissant de différence de longueur que sur la partie basse. Beaucoup plus élégant et habituel. |
|
|
|
|
|
 |
|
 |
|
<table width="500" border="0">
<tr>
<td width="240" valign="top">Contenu de la première colonne...</td>
<td width="20"> </td>
<td width="240" valign="top">Contenu de la deuxième colonne...</td>
</tr>
</table>
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
|
Contenu de la première colonne...
Tapez votre texte ici, dans la première colonne, il ira à la ligne automatiquement en se basant sur la
largeur de la cellule de votre tableau, ici 240 pixels. Cette cellule contenant plus de texte que l'autre, c'est elle qui
détermine la hauteur de la ligne du tableau et risque de centrer verticalement le contenu de l'autre colonne, mais
heureusement, nous avons pensé à utiliser l'attribut 'valign' avec pour valeur
'top' dans chacune de nos cellules... |
|
Contenu de la deuxième colonne...
La largeur de cette colonne est également limitée à la largeur de la cellule du tableau, toujours
240 pixels. Si nous n'avions pas utilisé l'attribut 'valign' avec pour valeur
'top' dans cette de nos cellule, le contenu se serait centré verticalement. |
|
|
|
|
|
|
|
|
|
|
|
|
