04-07-2008 : 1h59 min - non connecté
Dernière modification le 12 août 2007

 

Utilisation des tableaux

 

Utilités des tableaux

Historiquement, les tableaux ont été créé pour présenter des données comme on le ferait dans n'importe quel traitement de texte. Mais les capacités du langage HTML étant très minces en terme de mise en page, les développeurs ont très vite utilisé les tableaux pour faire de la mise en page.

Mais avant de vous lancer, sachez que cette façon de faire est en voie de disparition. On utilise maintenant les feuilles de styles pour tout ce qui a trait à la mise en page. On ne se sert des tableaux que lorsqu'on a besoin d'afficher des données sous forme de tableau. Un tableau met beaucoup plus de temps à s'afficher que si on utilisait des feuilles de styles à la place. On revient donc à l'utilisation d'origine des tableaux (comme dans un tableur ou un traitement de texte).

 

Insérer un tableau

Voyons maintenant comment insérer un tableau :

Il suffit de cliquer sur l'icône "Tableau". On peut alors choisir le nombre de lignes et de colonnes, la largeur du tableau et l'épaisseur de la bordure.

Le nombre de lignes et de colonnes : inutile de savoir combien vous aurez besoin de lignes. On peut en rajouter très simplement en utilisant la touche tabulation dans la dernière cellule du tableau. Le plus simple est donc de créer un tableau à une ligne avec le bon nombre de colonnes.

La largeur du tableau : elle peut être donné en pixel ou en pourcentage. Une largeur donnée en pixel est fixe, quelque que soit la taille de la fenêtre du navigateur. Si le tableau est trop grand il faudra utiliser l'ascenseur horizontal. Une largeur donnée en pourcentage s'adapte à la taille de la fenêtre. Un tableau de 100% prendra toute la largeur de la fenêtre du navigateur, quelque soit sa taille.

Avantages et inconvénients : une largeur donnée en pixel permet de garder votre mise en page intact, alors que en pourcentage le tableau sera déformé pour garder sa proportion par rapport au navigateur. Une largeur donnée en pourcentage permet d'avoir le tableau toujours visible dans l'écran.

La taille de la bordure : si vous mettez la taille à zéro le tableau sera invisible. Vous ne verrez que le contenu du tableau.

Nvu vous permet de modifier un tableau à la souris. Cliquez sur une cellule et vous verrez une petite croix et des flèches qui permettent d'ajouter et de supprimer des colonnes. Vous pouvez aussi redimensionner les colonnes et les lignes comme dans un tableur en glissant à la souris les limites de colonnes en haut de l'écran. Ceci dit, il n'est pas nécessaire de fixer les tailles des colonnes. Cela se fera automatiquemment par le navigateur, en fonction du contenu des cellules, de la résolution de l'écran, ...

 

Propriétés d'un tableau

En cliquant sur la même icône que précedemment (tableau) tout en étant dans le tableau vous obtenez plus de détails sur votre tableau. Vous pouvez mettre une couleur de fond, aligner le tableau, aligner le contenu des cellules, ... je vous laisse explorer les possibilités ...

Vous pouvez aussi joindre ou découper des cellules. Pour cela, utilisez le menu "Tableau".

Exercice :

Créez un tableau de 2 lignes et 3 colonnes avec une bordure de 1 et une largeur de 80%.

Joignez les trois cellules de la première ligne (on dit aussi fusionner dans d'autres logiciels) pour ne faire plus qu'une cellule. Mettez y un titre.

Complétez la deuxième ligne avec du texte, puis créez une troisième ligne en utilisant "tabulation" dans la dernière cellule.

Ajoutez un fond de couleur à votre tableau et enlevez la bordure.

Cours suivant : Insérer des images