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 sur 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 l'onglet tableau, toujours dans la partie droite, vous avez un sélecteur de thème. 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 ou à créer votre propre thème, puis à dupliquer vos tableaux.

 

choix du thème

 

La "fonction de style automatique: vous aide à colorer 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.

 

image35

 

Le paramètre triable vous permet de faire un tri des données AJAX sur le frontend.

 

image36

 

L'alignement du tableau consiste à aligner le div qui contient l'ensemble du tableau, centrez tout le tableau par exemple.

 

image37

 

Un hightlight de cellule est également disponible en option. Vous pouvez activer cette fonction dans la configuration. Il est désactivé par défaut. Vous pouvez sélectionner la couleur de mise en surbrillance et l'opacité de la mise en surbrillance.

 

mise en évidence de la table

 

3 . Ajouter une info-bulle sur les cellules

Les info-bulles de cellule doivent être activées à partir de la configuration du plugin (Menu de configuration). Après l'activation, vous obtiendrez un bouton au bas de la Format onglet lors de l'édition du tableau.

 

image39

 

Vous pouvez pour une largeur en pixels. L'info-bulle d'édition vous amènera à une info-bulle avec un éditeur pour modifier l'info-bulle.

 

é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

La congélation de lignes ou de colonnes est disponible dans le Table languette. 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 à nouveau disponible dans l'onglet tableau. Vous pouvez l'activer pour activer les champs de filtrage des données publiques.

 

filtre-colonne

Exemple de filtres:

 

responsive-table-scroll

 

6 . CSS personnalisé

Allons un peu plus loin. Si vous êtes un webdesigner avec des compétences css, vous pourrez ajouter css dans le Plus d'onglet. Vous pouvez ajouter un remplissage et un rayon de bordure sur la cellule.

 

image47

 

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.

 

Toujours sur le Onglet Plus, cliquez sur la coutume Bouton CSS pour accéder à l'édition css. Le code CSS est coloré en utilisant le code miroir 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

 

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

 

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

 

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

 

9 . Pagination

Vous pouvez trouver cette fonctionnalité dans l'onglet Tableau de chaque tableau. Activez et choisissez le nombre de lignes à afficher dans une page.

 

pagination-wptm