PapyClic - Design

PapyClic - Design

Générateur de tableaux - Plus

 

 Comme vous pouvez le voir sur l'image ci-dessous, ce générateur permet d'attribuer des couleurs différentes aux diverses cellules.

 

tableauPlus.jpg

 

Mais la plus importante différence avec le générateur précédent est, le style du tableau n'est pas en direct dans les balises HTML, il crée une feuille de style. Ce qui permet alléger le code dans l'article et pouvoir faire plusieurs tableaux de style identique et éventuellement de structure différente.

On peut même mettre ce style dans le CSS personnalisé, mais cette opération est réservée aux initiés car il faut mettre une CLASS que j'ai nommée "tableau" à tous les tableaux que vous souhaitez présenter avec ce style.  

Il est possible également de faire des variantes de couleur en faisant des CLASSes avec la propriété de couleur de fond d'une valeur différente. Si ce système vous intéresse je vous aiderez, vous postez sur mon forum dans "Vos tests". 

Pour avoir plus d'explications sur le formulaire ci-dessous, cliquez sur les labels avec la flèche rouge.


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 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 mais également aux textes 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
  Cochez supprime l'affichage des titres colonnes.

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 mais également aux textes des cellules.

 

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


Options Plus

Cette option met les lignes : 1, 3, 5, etc ...   en couleur, selon votre choix ci-dessous.  Si vous n'avez pas mis de couleur de fond aux cellules.
Vous pouvez utiliser en même temps l'option couleur au survol et mettre une couleur de fond au tableau.

  Cochez pour activer cette option.

Cliquez sur la première zone pour ouvrir la palette couleurs, pour la fermer cliquez à l'extérieur.

Cette option met les lignes : 2, 4, 6, etc ...   en couleur, selon votre choix ci-dessous. Si vous n'avez pas mis de couleur de fond aux cellules.
Vous pouvez utiliser en même temps l'option couleur au survol et mettre une couleur de fond au tableau.

  Cochez pour activer cette option.

Cliquez sur la première zone pour ouvrir la palette couleurs, pour la fermer cliquez à l'extérieur.

Cette option fonctionnera uniquement si vous n'avez pas mis de couleur au fond des cellules.

  Cochez pour activer cette option.

Cliquez sur la première zone pour ouvrir la palette couleurs, pour la fermer cliquez à l'extérieur.

Dans le code généré, toutes les cellules contiennent un texte. Il vous faudra supprimer le texte dans l'une des cellules pour voir le résultat quand vous publierez l'article.

  Cochez pour activer cette option.

Cliquez sur la première zone pour ouvrir la palette couleurs, pour la fermer cliquez à l'extérieur.

 

 

Pour générer tous les codes cliquez sur le bouton ci-dessous et vous pouvez même voir le résultat en fin d'article.

 

 

Voir les codes HTML et CSS séparés

J'ai prévu le code séparé pour ceux qui souhaiteraient, ajouter le code CSS généré, dans le CSS personnalisé de leur blog. De cette façon seul le code HTML est à insérer dans le composeur en mode HTML et si vous avez plusieurs tableaux identiques, dans plusieurs articles, c'est bien plus simple.
Pour les initiés en informatique, en créant des CLASSes dans le CSS, il est possible de faire d'autres tableaux avec la même base HTML et un style différent.

Pour les anciens tableaux, vous pouvez tester en mettant la CLASS "tableau" dans la balise "table".

Exemple : <table class"tableau">

Si ça ne fonctionne pas c'est qu'il y a des propriétés de style insérées dans les balises du tableau qui interfèrent. Soit vous les supprimez, soit vous utilisé le HTML généré et vous insérez le contenu du tableau et vous supprimez votre ancien tableau.

 

Code HTML

 

Code CSS

 


Codes CSS et HTML réunis

Les 2 codes réunis vous facilitent l'insertion dans le composeur d'article, car ces codes vont ensemble dans le composeur en mode HTML

 

 

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 externe où vous pourrez mettre en réserve le code CSS et HTML ci-dessus >>>lien
Et même le modifier si vous connaissez le CSS et le HTML.

 

 

 

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

 

 

 

 


Quelques exemples

 

Pour démontrer l'action des options "Plus".

 

 Exemple N°01 : Fond du tableau en couleur, et les titres des colonnes dans une couleur différente.

tableau_plus-Ex01.jpg

Voir le code pour le copier

 


Exemple N°02 : La ligne survolée change de couleur de fond, la quatrième dans cet exemple.

tableau_plus-Ex02.jpg

Voir le code pour le copier

 


 ExempleN°03 : Les lignes impaires sont en couleur différente du fond du tableau et la deuxième ligne est survolée. 

tableau_plus-Ex03.jpg

Voir le code pour le copier

 


  ExempleN°04 : Les lignes impaires et paires sont de couleurs différentes et la troisième ligne est survolée.  

tableau_plus-Ex04.jpg

Voir le code pour le copier

 


 ExempleN°05 : Les lignes et les colonnes sont séparées, le fond du tableau est visible. 

tableau_plus-Ex05.jpg

Voir le code pour le copier

 


ExempleN°06 : Même tableau que le précédent, mais avec les coins arrondis et les bordures ombrées. 

tableau_plus-Ex06.jpg

Voir le code pour le copier

 


ExempleN°07 : Les cellules vides sont en blanc.  

tableau_plus-Ex07.jpg

Voir le code pour le copier

 

 

 

 



02/02/2015

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 165 autres membres