Tableau : attributs de présentation (1)
| Sommaire de la formation |
|---|
| Les wikis |
|
| Introduction aux fonctions sémantiques |
| Auteur : Thierry Daunois avec la participation des utilisateurs |
| Retour à l'Espace formation |
Nous allons voir ici comment améliorer et personnaliser le visuel du tableau. Un certain nombre d'exemples sont déjà visibles sur la page consacrée aux notions de base, notamment dans le paragraphe consacré au tableau le plus complexe. Nous allons, ici, détailler la syntaxe permettant d'obtenir ces résultats.
Nous avons défini 6 grands domaines, qui nous paraissent les plus classiques et les plus utiles. Sur cette page, nous en détaillons 2.
Si vous vous retrouvez confronté à une question non abordée, n'hésitez pas à nous en informer, afin que nous puissions, le cas échéant, compléter cette page.
Sommaire
Donner un titre à un tableau
Il est naturellement toujours possible de donner un titre à un tableau en texte normal. Mais il est aussi prévu de pouvoir l'intégrer directement dans la syntaxe de construction du tableau, ce qui permet d'assurer qu'il soit bien centré et placé.
| Ligne 1 : Syntaxe d'ouverture du tableau | {|border="1" cellspacing="0" cellpadding="2" |
| Ligne 2 : Syntaxe du titre | |+ Exemple de tableau |
| Ligne 3 : Syntaxe de la cellule 1 | |Cellule 1 |
| Ligne 4 : Syntaxe de la cellule 2 | |Cellule 2 |
| Ligne 5 : Syntaxe de la cellule 3 | |Cellule 3 |
| Ligne 6 : Syntaxe de la cellule 4 | |Cellule 4 |
| Ligne 7 : Syntaxe de fermeture du tableau | |} |
Commentaire :
- Ligne 2 : la syntaxe |+ marque le fait que ce qui suit est le titre du tableau
Le résultat :
| Cellule 1 | Cellule 2 | Cellule 3 | Cellule 4 |
Déterminer la taille du tableau et/ou des cellules
Par défaut, en l'absence d'indications, le tableau s'adapte automatiquement à la dimension du contenu (et cela, pour chacun des colonnes). Ainsi, en ne spécifiant rien de particulier, on obtient :
| Cellule |
mais
| Ceci est un exemple destiné à montrer comment un tableau s'adapte à la longueur du contenu |
Et, lorsque deux cellules occupent une même colonne, le tableau s'adapte à dimension de la plus large des deux :
| Ceci est un exemple destiné à montrer comment un tableau s'adapte à la longueur du contenu |
| Cellule |
Mais il est parfois nécessaire de déterminer soi-même la dimension du tableau et/ou des cellules, ce qui s'obtient avec la commande width (pour la largeur, valeur la plus fréquemment modifiée), ou avec la commande height (ajustement en hauteur, nettement plus rare). Nous n'allons développer que la commande width, pour sa plus grande fréquence d'utilisation. Cependant, le mécanisme d'emploi de la commande height est très proche, et peut être déduite des explications qui suivent.
Agir sur la taille du tableau
Il est tout d'abord possible d'agir sur la taille globale du tableau, en fixant sa largeur totale, soit en pixel, soit en pourcentage de la largeur de la page.
Donner une dimension en pixels
Ainsi, pour que le tableau ait une largeur de 600 pixels, il faut ajouter sur la ligne 1, à la suite de l'ouverture du tableau, l'indication de la largeur voulue (les autres lignes restant inchangées, elles ne sont pas reprises ici) :
| Ligne 1 : Syntaxe d'ouverture du tableau | {|border="1" cellspacing="0" cellpadding="2" width=600px |
Commentaires :
- Ligne 1 : la commande permettant de fixer la largeur totale d'un tableau se présente sous la forme width=ypx, y étant la valeur en pixels (px)
- Ligne 1 : cette commande vient s'ajouter, comme tout attribut, directement à la suite de la syntaxe d'ouverture du tableau
Le résultat :
| Cellule |
Donner une dimension en pourcentage de la page
Ainsi, pour que le tableau ait une largeur de 60% de la page, il faut ajouter sur la ligne 1, à la suite de l'ouverture du tableau, l'indication de la largeur voulue :
| Ligne 1 : Syntaxe d'ouverture du tableau | {|border="1" cellspacing="0" cellpadding="2" width=60% |
Commentaire :
- Ligne 1 : lorsque la largeur est définie en pourcentage, la commande se présente sous la forme width=y%, y étant la valeur en pourcentage (par rapport à la largeur totale de la page, y étant donc inférieur ou égal à 100)
Le résultat :
| Cellule |
Agir sur la taille des cellules
Le mécanisme est comparable, et il est possible de jouer sur les deux tableaux, en donnant (par exemple) une dimension totale du tableau en pixels, et de préciser le pourcentage de ce total qui est attribué à chaque colonne. La syntaxe, elle aussi, est la même, simplement elle ne s'indique pas au même endroit : alors que, pour le tableau dans son ensemble, le paramètre était positionné en ligne 1, dans la déclaration d'ouverture du tableau, ici, c'est au niveau de chaque cellule que la déclaration doit être effectuée.
Donner une dimension en pixels
Ainsi, on modifie exclusivement la ligne de syntaxe de la cellule concernée :
| Ligne 1 : Syntaxe d'ouverture du tableau | {|border="1" cellspacing="0" cellpadding="2" |
| Ligne 2 : Syntaxe de la cellule 1 (dimension fixée) | |width=600px|Cellule 1 |
| Ligne 3 : Syntaxe de la cellule 2 (dimension libre) | |Cellule 2 |
| Ligne 4 : Syntaxe de fermeture du tableau | |} |
Commentaires :
- Ligne 2 : la commande permettant de fixer la largeur totale d'une cellule se présente sous la forme width=ypx, y étant la valeur en pixels (px)
- Ligne 2 : cette commande vient s'ajouter, comme tout attribut, directement au début de la ligne de déclaration de la cellule, séparée du contenu par le signe |
Le résultat :
| Cellule 1 | Cellule 2 |
Donner une dimension en pourcentage
Ici aussi, seule la ligne 2, qui donne la syntaxe de la cellule 1, est modifiée :
| Ligne 2 : Syntaxe de la cellule 1 (dimension fixée) | |width=90%|Cellule 1 |
Commentaire :
- Ligne 2 : lorsque la largeur est définie en pourcentage, la commande se présente sous la forme width=y%, y étant la valeur en pourcentage (par rapport à la largeur totale de la page, y étant donc inférieur ou égal à 100)
Le résultat :
| Cellule 1 | Cellule 2 |
Continuer à découvrir les fonctionnalités du réseau
- Retourner au sommaire de l'étape 4
- Poursuivre avec les attributs de présentation (2)
