Les tableaux dans l'éditeur de texte

Ce document vous guidera dans la création et l’édition de tableaux dans votre éditeur de texte, des astuces essentiels pour concevoir des mises en page plus complexes.

Il vous permettra également de garantir que votre présentation reste bien organisée et adaptée aux appareils mobiles.

Dans l'administration de votre site, accédez à l'éditeur de texte de la page où vous souhaitez insérer le tableau.

1- Vous pouvez inscrire un titre dans l'éditeur de texte, si vous le désirez (facultatif)

2- Placez le curseur à l'endroit où commencera le tableau

3- Cliquez sur "insérer un nouveau tableau"

Dans cet exemple, l'objectif est de vous montrer comment procéder lorsque vous souhaitez :

1- 4 colonnes

2- 3 lignes

3- Mettez le pourcentage que le tableau va occuper, ici 80% de la largeur de la page (rien dans "Hauteur")

4- Toujours mettre la "Classe" "responsive_table" pour que le tableau soit adaptatif (sur un appareil mobile) Cliquez "Insérer

Vous constaterez que vous avez 4 colonnes et 3 lignes.

1- Si vous voulez que votre tableau reste au centre de la page, cliquez sur "Centre" Dans notre présent exemple, nous désirons présenter notre équipe Nous voulons programmer la largeur de chaque cellule de la première ligne Placez le curseur dans la première cellule

 2- Cliquez sur "Propriétés de la cellule"

Comme la première et troisième colonne sera des photos et la deuxième et quatrième du texte, nous forcerons la largeur des cellules de la première ligne (les autres lignes vont suivre).

Du 20% pour la première et troisième cellule et 30% pour la deuxième et quatrième ce qui donne au total 100% de la totalité du tableau (20+30+20+30=100)

1- Maintenant nous avons les proportions voulues
 

2- Mettez le curseur dans la première cellule

3- Cliquez insérer une image. (? = "Aide-mémoire: Les images" dans le centre des ressources ViGlob)

1- Dans l'onglet "Apparence"

2- Nous allons enlever les dimensions en pixels qui sont dans les cases et nous allons mettre 100% dans la première et rien dans la deuxième 100% parce que nous voulons qu'elle prenne 100% de la largeur de la cellule. Rien dans l'autre mais il faut cliquez "conserver les proportions".

 3- Nous mettons la classe "responsive_img" pour que l'image soit redimensionnée dans un appareil mobile (si vous ne voyez pas cette classe, elle sera bientôt disponible). Cliquez "Insérer".

Inscrivez votre texte
Placez les images et les textes jusqu'à ce que votre tableau ai tous les éléments voulus.

Si vous voulez distancer les éléments de votre tableau

1- Espacement dans les cellules ou

2- Espacement entre les cellules ou les deux options