Tableau : attributs de présentation (1)

De Artist
Sommaire de la formation
Les wikis
Introduction aux fonctions sémantiques
  • Étape 5 : À quoi servent les fonctions sémantiques ?
  • Étape 6 : Les connaissances de base
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.

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 :

Exemple de tableau
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