WP Table Manager: Mise en forme des tableaux

1. Format

Dans la barre d'outils, vous pouvez définir le style des cellules : police, taille de police, style de texte, couleur de fond, couleur du texte, alignement horizontal et vertical, etc. Ces options peuvent être appliquées à une seule cellule ou à plusieurs

Vous pouvez sélectionner le pourcentage d'affichage dans l'éditeur de tableau. Cela vous permet d'effectuer un zoom avant/arrière sur votre tableau, de 50 % à 200 %.

La hauteur des lignes et la largeur des colonnes peuvent être définies en pixels. Accédez au menu Format > Appliquer la taille des colonnes/lignes , puis sélectionnez Redimensionner les colonnes / Redimensionner les lignes . Dans la fenêtre contextuelle, vous pouvez sélectionner la plage et définir les valeurs en pixels pour les colonnes ou les lignes. Cliquez sur Terminé pour finaliser.

2. Thèmes et options

Dans chaque tableau, vous trouverez de sélection du thème dans le menu Thème. Il vous suffit de cliquer sur un thème pour l'appliquer.

Couleurs alternatives

Dans le même menu, sous Thème > Couleurs alternatives , la fonction « Style automatique » vous permet de colorer les lignes de votre tableau grâce d'en-tête et de pied de page . Vous pouvez sélectionner les styles prédéfinis ou créer les vôtres dans les paramètres du plugin.

Vous pouvez supprimer la couleur alternative en cliquant sur « Supprimer >  Supprimer le style automatique » dans le menu contextuel (accessible par clic droit). La couleur sera alors effacée après votre confirmation.

Alignement du tableau

L'option « Aligner le tableau » permet d'aligner le div contenant le tableau, par exemple en le centrant. Vous trouverez cette option dans le menu Format > Aligner le tableau .

Mise en évidence des cellules

La mise en surbrillance des cellules est également disponible en option. Vous pouvez activer cette fonctionnalité dans la configuration. Elle est désactivée par défaut. Vous pouvez sélectionner la ligne à surligner pour ajuster la couleur et l'opacité de la mise en surbrillance.

3. Ajouter une infobulle aux cellules

Dans chaque cellule d'un tableau, l'option « Ajouter une infobulle » apparaît lorsque vous effectuez un clic droit.

Vous pouvez définir la largeur de l'infobulle en pixels. Vous accéderez alors à une infobulle contenant un éditeur pour la modifier.

Ajoutez du contenu et enregistrez, c'est terminé ! L'infobulle s'affichera publiquement au survol de la souris.

4. Gel des lignes et des colonnes

Congélation en colonne

Le gel des colonnes est disponible dans le menu Format > Options responsives . Vous pouvez geler jusqu'à 5 colonnes. Le comptage commence à la première colonne.

Pour figer les colonnes/lignes, il existe une option supplémentaire qui vous permet de fixer la hauteur du tableau (car votre conteneur de tableau peut avoir une hauteur infinie).

Une fois la colonne à figer sélectionnée, vous pourrez faire défiler votre tableau et afficher en permanence cette colonne fixe.

Gel des rangées

Vous pouvez le trouver dans le menu Format > En-tête du tableau , à partir de là vous pouvez activer l'option et définir des lignes à figer (jusqu'à 5 lignes).

Si vous souhaitez régler la hauteur de la table, veuillez revenir aux options réactives.

La première ligne sera alors figée côté client conformément aux paramètres définis.

5. Tri et filtres

Pour trier ou filtrer votre tableau, veuillez accéder au menu option Trier et filtrer

Une fenêtre contextuelle apparaît alors, contenant les options de tri et de filtrage. 

Pour trier un tableau, activez simplement de tri en front-end . Vous pouvez ensuite sélectionner la colonne de tri par défaut et son sens.

Par exemple, dans ce cas, sélectionnez la colonne A avec ASC .

Il existe 2 options de filtrage :

• Dans chaque colonne, vous pouvez filtrer les données en haut. Le bouton permet d'afficher ou de masquer le champ de recherche.

• Formulaire de filtre avancé : une fois l’option sélectionnée, vous pouvez rechercher et filtrer les données dans un tableau.

Recherche principale : Lorsque vous activez cette fonctionnalité, un champ de recherche s’affiche sur l’interface. Les utilisateurs peuvent ainsi facilement effectuer des recherches dans toutes les données du tableau.

6. Rembourrage des cellules et rayon de bordure

Vous trouverez dans la barre d'outils l'icône de bordure qui permet de régler le remplissage et le rayon de bordure des cellules.

7. CSS personnalisé

Allons plus loin. Si vous êtes un concepteur web maîtrisant le CSS, vous pourrez ajouter du CSS dans Format du menu > CSS personnalisé.

Le code CSS est coloré à l'aide de CodeMirror et peut être écrit en Less CSS, ça fonctionne aussi !

Les cellules, les lignes et les colonnes possèdent des coordonnées permettant de les identifier et d'appliquer un style CSS personnalisé. R représente une ligne et C une colonne.

8. Tableaux WordPress responsifs

Mes tableaux sont-ils adaptatifs ou utilisent-ils le défilement sur les petits appareils ?

Cacher les Cols

WP Table Manager gère la conception adaptative grâce à un outil prioritaire, disponible en option. Par défaut, cette fonctionnalité est désactivée, ce qui provoque un débordement (fonctionnant parfaitement sur mobile). Pour utiliser « Masquer les colonnes » , accédez à Format du menu > Options adaptatives.

Le mode adaptatif est avancé : vous pouvez définir une priorité pour le masquage des colonnes sur les appareils mobiles. Lorsque des colonnes sont masquées, un menu mobile avec une case à cocher s'affiche pour forcer leur affichage ou leur masquage.
La taille des colonnes est fixe lors de la création du tableau. Si la taille de toutes les colonnes dépasse celle du conteneur, un débordement se produira et vous pourrez facilement faire défiler la page sur les appareils mobiles.

Tableau avec défilement (idéal pour un petit nombre de colonnes)

Tableau avec colonne masquée (idéal pour un grand nombre de colonnes)

En-tête répété

Voici une autre option si vous souhaitez insérer un tableau dans une zone restreinte de votre site. Accédez à Format du menu > Options responsives, puis sélectionnez Type responsive > En-tête répété.

Des options de personnalisation seront disponibles en fonction de vos besoins :

• Point de rupture adaptatif (px) : Sélectionnez une valeur de point de rupture en pixels pour définir à quel moment le tableau basculera en mode adaptatif.
• Hauteur maximale adaptative (px) : Lorsque le mode adaptatif est activé, en fonction de la valeur du point de rupture, définissez une hauteur maximale pour éviter un tableau trop long.
• Style du mode adaptatif : Appliquez un style par défaut pour ce mode adaptatif ou utilisez les couleurs du tableau

Vous pourrez ensuite voir à quoi ressemblera le tableau sur l'interface utilisateur.

Si vous utilisez un en-tête répété et que Filtre est activée, vous pouvez filtrer en saisissant du texte dans la zone de texte en mode mobile.

9. Exporter vers Excel

Pour enregistrer votre tableau sur votre ordinateur, accédez au menu « Tableau » et cliquez sur le bouton « Exporter vers Excel » . Le fichier exporté sera alors au format *.xlsx.

10. Pagination

Vous trouverez cette fonctionnalité dans le menu Format > Pagination de chaque édition de tableau. Utilisez le bouton bascule pour l'activer et choisir le nombre de lignes à afficher par page.

11. Style des bordures des cellules

Vous pouvez appliquer différents types de bordures à votre tableau : épaisseur, couleur, style. Commencez par sélectionner la plage de cellules, puis cliquez sur l’icône correspondante dans la barre d’outils.

12. Imprimer le tableau côté client

Il peut arriver que vous ayez besoin d'imprimer votre tableau. Pour afficher le bouton Imprimer sur l'interface, vous devez d'abord accéder à Menu > Tableau, puis cocher le bouton Imprimer.