Générateur de tableaux

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

GENERATEUR

Nombre de lignes :

Nombre de colonnes :

Largeur tableau :

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.

Titre du tableau :

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.

Cellules :

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.

Valeurs des espaces entre cellules :

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

Marge dans les cellules :

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

Couleur de fond du tableau :

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.

Bordure du tableau :

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

Tableau avec :

coins arrondis
bordures ombragées

Couleur de fond des cellules :

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.

Bordure 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

Cellules avec :

coins arrondis
bordures ombragées

Vous ne voulez pas afficher les titres des colonnes.

Cochez cette case :

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.

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 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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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
C1	C2	C3	C4
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

Haut Précédente

29/01/2015

2 J'aime

A découvrir aussi

Retour aux articles de la catégorie Contenu Article -

⨯

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 167 autres membres