Construire une table de données dans WordPress signifie généralement se battre avec HTML ou coller un shortcode que vous ne pouvez pas styliser Le gratuit Widget Table dynamique dans Modules complémentaires principaux pour Elementor vous permet d'en construire une visuellement : ajouter des colonnes d'en-tête, remplir des lignes et styliser chaque partie du panneau Élémenteur Pas de balisage de table, pas de verrouillage du plugin.
Il convient à tout ce qui appartient à une grille, comme les répertoires d'employés, les fiches techniques, les horaires ou les listes de prix. Vous pouvez fusionner des cellules, ajouter des icônes aux en-têtes, rayer les lignes et activer un mode réactif pour les téléphones. Vous trouverez ci-dessous une analyse de chaque paramètre, des cellules d'en-tête aux onglets de style.
Ce que fait le widget Table dynamique #
Le widget construit une table HTML standard à partir de deux répéteurs : un pour la ligne d'en-tête et un pour les cellules du corps Chaque cellule est son propre élément, vous contrôlez donc le texte, l'alignement et même les colonnes ou les lignes sans écrire de code.
Il comporte trois onglets : Contenu pour l'en-tête, le corps et les paramètres, Style pour les couleurs et l'espacement, et Avancé pour les options Elementor habituelles Le résultat est une table propre et réactive qui correspond à votre thème.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Les données que vous souhaitez afficher sont esquissées sous forme de colonnes et de lignes.
Comment ajouter le widget Table dynamique #
Dans l'éditeur Elementor, ouvrez le Éléments panneau et recherche pour Tableau dynamique(ou faites défiler vers la section Addons principaux) Faites-le glisser sur votre page Il se charge avec un exemple de table afin que vous modifiiez à partir d'une mise en page de travail au lieu d'une grille vide.
Configurez l'en-tête de la table #
Ouvrir le Contenu onglet. Le Tête de table section tient la ligne d'en-tête Le Tête de table basculer affiche ou masque l'en-tête, et le Cellule d'en-tête de tableau le répéteur contient un élément par colonne.
Chaque cellule d'en-tête possède ses propres sous-onglets Contenu et Options. Dans Contenu vous définissez le Nom de la colonne et peut ajouter un Icône ou un Image a côté (Type : Aucun, Icône ou Image).Utiliser Ajouter un élément pour ajouter des colonnes, l'icône de copie pour en dupliquer une, et le X pour la supprimer.
Remplissez le corps de la table #
Le Tableau Corps section contient les cellules Chaque élément est une cellule, et un Nouvelle rangée? basculez les marques où commence une nouvelle ligne, vous ajoutez donc des cellules dans l'ordre et signalez le début de chaque ligne.
Chaque cellule corporelle comporte également des sous-onglets Contenu et Options :
- Texte du corps : le contenu de la cellule, qui accepte également les balises dynamiques Chaque balise remplit une cellule.
- Envergure de la colonne et envergure de la rangée : fusionner une cellule sur des colonnes ou des lignes.
- Largeur personnalisée : définissez une largeur fixe pour cette colonne.
- Alignement : gauche, centre, droite ou justifier au sein de la cellule.
- Décoration: souligner, surligner ou aligner pour le texte de la cellule.
Pour faire croître la table, cliquez sur Ajouter un élément: tapez le texte de la cellule et activez-le Nouvelle rangée? sur la première cellule de chaque nouvelle ligne Ici une cinquième ligne d'employé est en cours d'ajout.
Rendre la table réactive #
Le Paramètres la section a un Tableau réactif? basculer. Avec elle allumée, la table reflue sur les petits écrans au lieu de déborder, donc chaque ligne s'empile dans une carte lisible sur les appareils jusqu'à 768 px de large, avec le nom de la colonne affiché comme une étiquette C'est le réglage que les gens oublient, et c'est pourquoi une table semble cassée sur mobile.
Style la table #
Le Style tab est divisé en Style mondial, Style d'en-tête de table, et Tableau Corps, plus Modèles (une option Pro). Le Style mondial la section définit l'apparence à l'échelle du tableau.
- Table rayée : allumez les rayures zébrées et choisissez la couleur des rangées rayées.
- Couleur de fond : la couleur de base derrière les cellules.
- Rembourrage de cellule intérieure : l'espace à l'intérieur de chaque cellule.
- Type de frontière et rayon de frontière : les lignes entre les cellules et les coins arrondis.
Style de l'en-tête et de la carrosserie #
Le Style d'en-tête de table section définit l'arrière-plan, la couleur du texte, la typographie et le remplissage de l'en-tête afin que la rangée supérieure se démarque. Le Tableau Corps la section fait de même pour les cellules de données.
- Couleur d'arrière-plan et couleur du texte : les couleurs des cellules du corps.
- Taille de l'icône, couleur de l'icône et remplissage d'icônes : style pour toutes les icônes de cellule.
- Alignement et typographie : comment le corps du texte se trouve et ressemble.
Le résultat sur la page #
Publiez ou prévisualisez et le tableau se rend avec vos colonnes, lignes et rayures en place, réactif sur mobile si vous l'allumez.
Cas d'utilisation courants #
- Répertoires d'employés ou d'équipes avec les noms, rôles, et coordonnées.
- Feuilles de spécifications comparaison des caractéristiques et des valeurs du produit.
- Horaires et horaires pour les cours, les événements ou les heures de bureau.
- Listes de prix cela n’a pas besoin d’un complet tableau tarifaire.
- Résumés de données sorti d'une feuille de calcul dans une grille stylisée.
Conseils pour travailler avec le widget Table dynamique #
- Planifiez d'abord les colonnes. Définissez chaque cellule d'en-tête avant de remplir le corps afin que les lignes s'alignent.
- Mark New Row sur la première cellule uniquement. Signalez le début de chaque ligne, pas toutes les cellules, ni la mise en page se brise.
- Allumez la table réactive pour les téléphones. Les tables larges débordent sur mobile à moins que ce ne soit activé.
- Utilisez des rayures pour les tables longues. Les lignes zébrées rendent une table de données haute beaucoup plus facile à numériser.
- Gardez le texte de la cellule court. De longues cordes étirent une colonne, alors utilisez la largeur personnalisée pour garder les choses égales.
Foire aux questions #
Qu'est-ce que le widget Table dynamique dans Master Addons ?
C'est un widget Elementor qui construit visuellement une table de données HTML Vous ajoutez des colonnes d'en-tête et des cellules de corps via des répéteurs, puis vous stylisez les couleurs, le remplissage, les bordures et les rayures du panneau Il n'y a pas de HTML ou de shortcode impliqué, et la table peut être rendue réactive.
Puis-je fusionner des cellules dans la Table Dynamique ?
Oui. Chaque cellule du corps a des options de portée de colonne et de portée de ligne dans sa sous-onglet Options. Définissez une étendue pour fusionner cette cellule sur plusieurs colonnes ou lignes, ce qui est utile pour les titres groupés ou les lignes récapitulatives à l'intérieur du tableau.
La Table Dynamique est-elle réactive sur mobile ?
Oui. La section Paramètres a une bascule Table réactive Avec elle allumée, la table reflue sur de petits écrans de sorte que chaque ligne s'empile dans un bloc lisible au lieu de déborder de la page, ce qui maintient les tables larges utilisables sur les téléphones.
Puis-je ajouter des rangées rayées à la table ?
Oui. Dans l'onglet Style, la section Style global a une bascule de table rayée et une couleur de fond rayée Allumez-la pour ajouter des rayures zébrées, ce qui alterne la couleur des lignes et rend les longues tables beaucoup plus faciles à lire.
Puis-je ajouter des icônes aux en-têtes de table ?
Oui. Chaque cellule d'en-tête a une option Type avec Aucun, Icône ou Image Choisissez Icône pour en choisir une dans la bibliothèque d'icônes, ou Image pour télécharger une image L'icône s'affiche à côté du nom de colonne, ce qui permet d'étiqueter les colonnes comme le courrier électronique, le téléphone ou l'emplacement en un coup d'œil.
Puis-je trier, rechercher ou importer un CSV dans la Table Dynamique ?
Non. Le widget n'a pas de tri, de recherche, de pagination ou d'importation CSV. Pour ceux-ci, utilisez un plugin de table de données tel que TablePress et placez son shortcode sur la page.
Envelopper #
Le Widget Table dynamique transforme les lignes et les colonnes de données en un tableau épuré et stylisé sans toucher au HTML Définissez vos en-têtes, ajoutez les cellules du corps, signalez chaque nouvelle ligne, puis stylisez les couleurs, les rayures et les bordures pour correspondre à votre page Pour les dispositions de données associées, consultez le Widget Tableau Comparatif (Pro) et le Widget de table de tarification: parcourez le tableau complet Widgets et extensions Master Addons&, et vérifiez le page de tarification pour ce que chaque plan comprend.
