Widget de table d'élémenteur gratuit
Elementor n'a pas de widget de table propre, dans la version gratuite ou la version Pro. Dynamic Table est un widget gratuit Master Addons qui comble cette lacune : vous ajoutez des cellules d'en-tête et des cellules corporelles dans le panneau Elementor, et il construit une véritable table HTML que vous pouvez styliser sans code Les cellules peuvent contenir du texte, une icône ou une image, fusionner sur des colonnes ou des lignes et extraire des valeurs des balises dynamiques Il est souvent utilisé pour les plannings, les fiches techniques, les listes de prix et les répertoires.
Construisez des lignes et des colonnes dans le panneau
Le tableau provient de deux répéteurs. Cellule d'en-tête de tableau contient un élément par colonne, et Tableau Cellule du corps tient chaque cellule dans l'ordre de lecture, avec un Nouvelle rangée? commutateur qui démarre la ligne suivante Vous pouvez faire glisser des éléments pour les réorganiser, dupliquer une cellule ou masquer la ligne d'en-tête avec le Tête de table interrupteur.
- Cellules fusionnées : Envergure de la colonne sur les cellules de l'en-tête et du corps, et en envergure sur les cellules du corps.
- Largeur de la colonne : activez la largeur personnalisée dans l'onglet Options d'une cellule pour définir sa largeur.
- Options de texte par cellule : alignement (gauche, centre, droite ou justify) et décoration (souligné, en ligne ou en ligne).
En-tête et style corporel
Style d'en-tête de table définit l'arrière-plan de l'en-tête (marine sombre par défaut), la couleur du texte, la taille et la couleur des icônes, l'alignement, la typographie et le remplissage des cellules internes. Tableau Corps a les mêmes contrôles pour les cellules de données, plus le remplissage autour des icônes.
- En-tête : arrière-plan, couleurs du texte et des icônes, taille des icônes, alignement, typographie et remplissage des cellules.
- Corps: arrière-plan, couleurs de texte et d'icônes, taille et remplissage des icônes, alignement, typographie et remplissage des cellules.
- Alignement par appareil : l'alignement de l'en-tête et du corps peut changer sur tablette et mobile.
Texte, icônes, images et balises dynamiques dans les cellules
Chaque en-tête et cellule corporelle a un Type option : Aucune, Icône ou Image Les icônes proviennent de la bibliothèque d'icônes Elementor, et les images obtiennent une Taille d'image en pixels Les champs de texte acceptent les balises dynamiques, y compris celles de la version gratuite Balises dynamiques extension, pour qu'une cellule puisse afficher un titre de publication, un champ personnalisé ou des détails sur l'auteur Chaque balise remplit une cellule Le widget ne boucle pas à travers les publications pour créer des lignes pour vous.
- Icônes comme coches : utilisez une tique ou une icône croisée dans les comparaisons de plans ou de fonctionnalités.
- Petites images: ajouter une photo ou un logo à côté d'un nom, dimensionné en pixels.
- Tags dynamiques : tirez sur des valeurs uniques telles que le titre du message ou un champ personnalisé.
Style global : rayures, frontières et coins
Style mondial s'applique à toute la table. Table rayée? est activé par défaut avec une couleur de bande gris clair (#eee) que vous pouvez modifier. Vous définissez également une table Couleur d'arrière-plan, Rembourrage de cellules intérieures, une bordure avec type, largeur et couleur, et Rayon de bordure pour les coins arrondis.
- Rangées zébrées : continuez à rayer sur les tables longues afin que les rangées soient faciles à suivre.
- Frontières: lignes pleines, pointillées, pointillées ou doubles autour des cellules.
- Coins arrondis: Border Radius adoucit le bord de la table.
Code de table HTML par rapport au widget de table dynamique
Sans widget de table, la façon habituelle d'ajouter une table dans Elementor est d'écrire le HTML vous-même dans un widget HTML Voici comment cela se compare avec le widget.
| Caractéristique | Widget HTML avec votre propre code | Tableau dynamique Master Addons |
|---|---|---|
| Prix | Gratuit (Cœur de l'élément) | Gratuit |
| Construire des lignes et des colonnes | Écrire des balises table, tr et td | Répéter les éléments dans le panneau |
| Style | Votre propre CSS | Contrôles des onglets de style |
| Cellules fusionnées | attributs colspan et rowspan | Champs de portée de colonne et de portée de rangée |
| Icônes et images dans les cellules | Collez le balisage | Bibliothèque d'icônes ou médiathèque |
| Tags dynamiques | Non | Oui, une valeur par cellule |
| Disposition téléphonique | Vos propres requêtes médias | Les lignes s'empilent dans les cartes |
| Tri, recherche, importation CSV | A besoin d'un script ou d'un plugin | Non |
Si vous avez besoin d'un tri, d'une recherche, d'une pagination ou d'une importation CSV, un plugin de table dédié tel que TablePress est le meilleur choix Pour une table stylée que vous modifiez à l'intérieur d'Elementor, le widget vous sauve en écrivant HTML et CSS.
Connexes: Tableau des prix (gratuit), Tableau comparatif (Pro) et Balises dynamiques (gratuit).
Comment faire une table en élément
Dans le panneau Élémenteur, le widget s'appelle Tableau dynamique.
- Installez Master Addons pour Elementor et vérifiez cela Tableau dynamique est activé dans les paramètres du widget Master Addons.
- Modifiez votre page avec Elementor, recherchez Tableau dynamique et faites-le glisser Cela commence par un exemple de tableau à quatre colonnes.
- Dans Tête de table, ajoutez-en un Cellule d'en-tête de tableau par colonne et tapez chacune Nom de la colonne.
- Dans Tableau Corps, ajoutez un élément par cellule de gauche à droite Allumez Nouvelle rangée? sur la première cellule de chaque ligne après la première.
- Utilisation Vague de colonne ou Portée de la rangée dans l'onglet Options d'une cellule pour fusionner les cellules.
- Stylez la table dans l'onglet Style et laissez Tableau réactif? sur la pile de lignes sur les téléphones, puis mettez à jour la page.
Foire aux questions pour la table dynamique
Y a-t-il un widget de table dans Elementor ?
Pas dans Elementor lui-même, gratuit ou Pro. Master Addons en ajoute un gratuitement : le widget Dynamic Table construit le tableau à partir des cellules d'en-tête et de corps dans le panneau.
La table est-elle réactive sur les appareils mobiles ?
Oui, avec Table réactive ? allumée, qui est la valeur par défaut Sur les appareils jusqu'à 768 px de large chaque ligne se met dans une carte et chaque cellule affiche son nom de colonne comme étiquette Éteignez-la pour garder la disposition normale de la table sur les téléphones.
Puis-je utiliser des données dynamiques dans les cellules ?
Oui, une valeur par cellule Le texte de l'en-tête et du corps accepte les balises dynamiques, y compris les balises dynamiques gratuites des modules complémentaires principaux telles que le titre de la publication, le champ personnalisé et les informations sur l'auteur. Le widget ne crée pas de ligne pour chaque publication, donc chaque ligne est toujours construite à la main.
Que se passe-t-il si j'ajoute un texte très long dans une cellule ?
Le texte s'enroule à l'intérieur de la cellule Activez la largeur personnalisée dans l'onglet Options de la cellule pour corriger la largeur de la colonne et augmentez le remplissage de la cellule intérieure si les lignes semblent exiguës.
Puis-je mettre en évidence une colonne, comme un plan populaire ?
Pas avec un seul réglage Les couleurs s'appliquent à tout l'en-tête ou à tout le corps Pour les tableaux plans, le Tableau des prix widget (gratuit) a une option Highlight, et le Tableau comparatif widget (Pro) est construit pour les comparaisons de plans.
Puis-je trier, rechercher ou importer un CSV dans la table ?
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.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
