Générateur de tableaux - Plus - PapyClic

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.

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

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.

Rendez-vous dans l'espace de gestion, dans ARTICLES >>> Ajouter un article >>> cliquez sur HTML pour ouvrir le composeur en mode éditeur HTML :

Voir les 4 captures des 4 étapes dans le tableau ci-dessous:

Les captures
Capture 1	Capture 2	Capture 3	Capture 4

Comme vous pouvez le constater j'ai utilisé mon générateur et l'icône "Image" du composeur pour insérer les images zoomables.

Dans ce générateur le code CSS n'est pas dans les balises HTML, il est mis sous forme de feuille de style, vous le voyez dans la capture 3.

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 quand vous faites un clic-droit sur le tableau.
Cliquez sur l'image ci-contre pour voir quelques captures d'écran.

Dans le menu contextuel du clic-droit, vous pouvez par exemple ajouter des lignes et des colonnes, positionner le contenu dans les cellules :

Quelques captures exemples
Insertion de ligne

Alignement du contenu des cellules

Autre exemple intéressant :

Fusion de cellules
Cellules dans colonne		Cellules dans ligne

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é.