WP Table Manager : Styling Tables

1. Format

L'onglet format est disponible par défaut à droite de votre écran. Il contient différents paramètres.

 

image31

 

  • Type de cellule: par défaut ou HTML. Le type par défaut vous permet de faire du calcul avec lui le HTML insérant du contenu HTML comme des images. Un éditeur WYSIWYG pour chaque cellule sera implémenté dans la prochaine version, pour le moment où vous ajoutez du HTML dans la cellule.
  • Fond de cellule Couleur: définir la couleur de fond bien sûr

 

image32

 

Les bordures et les options de police peuvent être appliquées à une ou plusieurs cellules.

 

image33

 

La largeur des lignes et des colonnes peut être définie en pixels. Sélectionnez une colonne ou une ligne n'importe où dans le tableau et validez la taille.

 

2 . Thème et options de tri

Dans chaque tableau, vous pouvez trouver Sélection du thème option à Thème du menu. Cliquez simplement sur un thème pour l'appliquer.

L'application d'un thème remplacera toutes les données et le style de votre tableau. La façon de procéder consiste donc à appliquer un thème, puis à modifier les données pour créer votre propre thème, puis à dupliquer vos tableaux.

 

choix du thème

 

Sur le même Thème du menu> Couleurs alternatives, la fonction "Style automatique" vous aide à colorier la ligne de votre table avec Style d'en-tête et Style de pied de page les options. Vous pouvez sélectionner les styles de modèle ou créer les vôtres dans les paramètres du plugin.

 

thème-alter-couleur

 

Le paramètre triable vous permet de faire un tri des données AJAX sur le frontend. Vous pouvez voir sur Format du menu> Trier.

 

table de tri

 

L'alignement du tableau consiste à aligner le div qui contient l'ensemble du tableau, centrez tout le tableau par exemple. Vous pouvez trouver sur Format du menu> Alignement du tableau.

 

aligner la table

 

Un surlignage de cellule est également disponible en option. Vous pouvez activer cette fonctionnalité dans la configuration. Il est désactivé par défaut. Vous pouvez sélectionner la ligne de surbrillance pour ajuster la couleur et l'opacité de la surbrillance.

 

mise en évidence de la table

 

3 . Ajouter une info-bulle sur les cellules

Sur chaque cellule d'un tableau, vous pouvez voir l'option Ajouter une info-bulle lorsque vous effectuez un clic droit dessus.

 

add-tooltip

 

Vous pouvez définir la largeur de l'infobulle en pixels. Il vous amènera à une info-bulle avec un éditeur à modifier.

 

éditeur d'infobulles

 

Ajoutez du contenu et enregistrez, vous avez terminé, l'info-bulle sera affichée du côté public au survol de la souris.

 

info-bulle

 

4 . Congélation des lignes et des colonnes

Le gel de ligne ou de colonne est disponible dans le menu Format> Options réactives. Vous pouvez figer jusqu'à 5 lignes ou colonnes. Il est compté à partir de la première ligne / col.

 

ligne de gel

 

Pour faire geler les lignes, il existe une option supplémentaire qui vous permet de fixer la hauteur de la table (car votre conteneur de table peut avoir une hauteur infinie).

 

arrêt sur ligne

 

Lorsque vous avez choisi la ligne ou la colonne à figer, vous pourrez faire défiler votre tableau et toujours afficher la ligne / les lignes fixes.

 

affichage en ligne fixe

 

5 . Filtrage des données de colonne

Une option de filtrage est disponible sur Format du menu > Filtres. Vous pouvez l'activer en cliquant pour activer les champs de filtrage des données publiques.

 

filtre-colonne

 

Exemple de filtres:

 

responsive-table-scroll

 

6 . Rembourrage cellulaire et rayon de bordure

Vous pouvez trouver que l'icône de bordure sur la barre d'outils permet d'ajuster le rembourrage et le rayon de bordure sur la cellule.

 

bordure de rembourrage

 

Notez que si vous avez appliqué un thème, certains CSS personnalisés seront ajoutés automatiquement. Vous pouvez toujours le modifier bien sûr.

 

7 . CSS personnalisé

Allons un peu plus loin. Si vous êtes un concepteur Web avec des compétences css, vous pourrez ajouter css à Format de menu> CSS personnalisé. 

 

format-custom-css

 

Le code CSS est coloré en utilisant le miroir de code et peut être écrit en moins CSS, ça marche aussi!

 

table-personnalisée-css

 

Les cellules, les lignes et les colonnes ont des coordonnées pour identifier chacune et y appliquer des CSS personnalisés. R est la ligne, C est la colonne.

 

affichage css

 

8 . Tableaux WordPress responsive

Mes tableaux sont-ils responsive ou utilisent-ils le défilement sur de petits appareils?

WP Table Manager gère la conception réactive avec un outil prioritaire, en option. Par défaut, la fonction responsive est désactivée, il y aura un débordement (la sorcière fonctionne très bien sur mobile cependant). Pour utiliser Cacher les cols option, vous devriez aller à Format du menu> Options réactives.

 

mode réactif

 

Le mode réactif est avancé, vous pouvez définir une priorité pour masquer les colonnes sur les tailles mobiles. Lorsque les colonnes sont masquées, un menu mobile avec case à cocher s'affiche pour forcer l'affichage / masquer des colonnes.  
La taille de la colonne est fixée lors de l'édition du tableau. Si la taille de toutes les colonnes est trop grande pour le conteneur, vous aurez un débordement et vous pourrez facilement faire défiler sur les appareils mobiles.

Tableau avec un défilement (mieux pour une petite quantité de colonnes)

 

responsive-table-scroll

 

Table avec colonne cachée (mieux pour une grande quantité de colonnes)

 

57bb0cb0ac948

 

9 . Téléchargez le tableau

Pour partager votre table avec le public, vous devez activer Bouton de téléchargement option à Onglet Tableau sur le panneau de droite. Le type de fichier sera * .xlsx.

 

table de téléchargement

 

10 . Pagination

Vous pouvez trouver cette fonctionnalité sur Menu> Format onglet dans chaque tableau. Utilisez le bouton bascule pour activer et sélectionner le nombre de lignes à afficher dans une page.

 

pagination-wptm