PapyClic - Design

PapyClic - Design

Générateur de tableaux

exempleTableau.jpg

 

Ce générateur vous permet de créer la structure d'un tableau en HTML, comme l'exemple ci-dessus, le code généré sera à insérer dans le composeur d'article en mode HTML. Ensuite dans le composeur en mode texte, vous mettrez le titre du tableau et celui des colonnes, puis vous insérerez vos textes ou vos photos dans les cellules. Vous pourrez également faire des modifications en utilisant les outils du menu du composeur ou dans le menu contextuel du clic-droit.

En-dessous du générateur l'aperçu du tableau s'affichera, si le résultat ne vous convient pas, vous modifier les valeurs que vous avez mises et vous générez à nouveau.

Plus bas des exemples sont à votre disposition, vous pouvez copier le code et même le tester ou le modifier si  vous connaissez le HTML, dans une page externe en collant le code.

Avant de commencer, je vous invite à regarder cette animation >>> video_32.png

 


GENERATEUR 

 

 

En % par rapport au bloc article.

Ou un nombre 650, 600, 500 ... avec l'unité choisie dans la liste.
Le tableau est centré par défaut.

Si vous ne voulez pas mettre de titre, laissez cette zone vide.
Le texte est noir et centré par défaut. Pour modifier la couleur, voir plus bas, c'est la même couleur que la bordure des titres.
Vous pourrez par la suite changer le style dans le composeur d'article.

collées : les bordures adjacentes se confondront. Dans ce cas vous ne mettez rien dans la zone suivante.

espacées : chaque cellule a ses bordures avec les espaces indiqués dans la zone suivante.

Si vous ne mettez rien, il faut mettre la valeur de la zone précédente "Cellules" à collées.

 

Pour des cellules "espacées"

Si vous renseignez qu'une seule des 2 valeurs, elle s'appliquera aux 4 côtés.
Mettez les 2 valeurs, si vous voulez des espaces différents.
N'oubliez pas de sélectionner une valeur dans la liste des unités.

Horizontal Vertical

Espace pour empêcher le contenu des cellules, de coller aux bordures.


Cliquez sur la première zone pour ouvrir la palette couleurs, pour la fermer cliquez à l'extérieur.
Pour adapter la couleur des textes à celle du fond, changer la couleur de la bordure, noir par défaut, même si vous ne mettez pas de bordure.


Si vous avez un code couleur, mettez le dans la deuxième zone.

La taille de la bordure est mise à zéro par défaut, si la zone est vide vous avec automatiquement une fine bordure.
Vous cliquez sur le code couleur pour ouvrir la palette, cette couleur sera appliquée aux bordures, également au texte du titre du tableau et des titres des colonnes.

Même si vous ne voulez pas de bordure, mettez une couleur pour les titres ou ils seront en noir par défaut.

Taille Couleur Style
  coins arrondis
  bordures ombragées

Cliquez sur la première zone pour ouvrir la palette couleurs, pour la fermer cliquerez à l'extérieur.
Pour adapter la couleur des textes à celle du fond, changer la couleur de la bordure, noir par défaut, même si vous ne mettez pas de bordure.
Si vous avez un code couleur, mettez le dans la deuxième zone.

La taille de la bordure est mise à zéro par défaut, si la zone est vide vous avec automatiquement une fine bordure.
Vous cliquez sur le code couleur pour ouvrir la palette, cette couleur sera appliquée aux bordures mais également aux textes des cellules.

Même si vous ne voulez pas de bordure, mettez une couleur pour le texte des cellules ou ils seront noir par défaut.

Taille Couleur Style
  coins arrondis
  bordures ombragées

Vous ne voulez pas afficher les titres des colonnes.
 

 

 

 

Si vous avez fait des modifications directement dans la zone ci-dessus
 cliquez sur >>> 

 

 

https://static.blog4ever.com/2012/06/704535/artfichier_431181_220581_201103130534713.gif

Le code généré est à insérer dans le composeur d'article
en mode HTML, cliquez sur l'icône ci-contre.

 

Une fois le tableau inséré dans l'article, vous modifiez le contenu des cellules et vous pouvez même utilisez les options d'édition qui sont disponible dans le menu contextuel qui s'affiche https://static.blog4ever.com/2012/06/704535/artfichier_431181_220581_201103130534713.gifquand vous faites un clic-droit sur le tableau.
Cliquez sur l'image ci-contre pour voir quelques captures d'écran.

 

 

Cliquez pour ouvrir une page où vous pourrez tester le code généré, également le code des exemples >>>lien
Et même le modifier si vous connaissez le HTML.

 

 

 Aperçu du tableau construit avec le code généré :

 

 

 


 

Quelques exemples ...

Pour vous faire voir ce qu'il est possible de faire en renseignant progressivement les champs du formulaire et vous pouvez voir le code

 

Tableau exemple N°01
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°02
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°03
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°04
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°05
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°06
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°07
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°08
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°09
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°10
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°11
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier


 

 

Tableau exemple N°12
C1C2C3C4
L1C1 L1C2 L1C3 L1C4
L2C1 L2C2 L2C3 L2C4
L3C1 L3C2 L3C3 L3C4
L4C1 L4C2 L4C3 L4C4
L5C1 L5C2 L5C3 L5C4

Voir le code pour le copier

 

HautPrécédente



29/01/2015
16 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 153 autres membres