Principaux points à retenir
- TablePress fonctionne avec Elementor de deux manières : un widget nommé TablePress table que TablePress 3.4 ajoute au panneau Elementor, et le shortcode [id de table=1 /] placé dans le widget Shortcode.
- Le widget de table TablePress dans Elementor a un champ de liste déroulante Table et un champ Paramètres de configuration, et il n'a pas d'onglet Style.
- TablePress active le tri, la recherche et la pagination pour les visiteurs par défaut, avec 10 lignes par page.
- Le défilement horizontal est désactivé par défaut dans TablePress, donc une table à cinq colonnes déborde sur un téléphone 390 px jusqu'à ce que vous la cochiez dans les paramètres de la table.
- Pour une table courte qui doit être modifiée et stylisée dans Elementor, un widget de table tel que Master Addons Dynamic Table est moins efficace que TablePress.
TablePress et Elementor travaillent ensemble sans aucun plugin bridge Vous construisez la table dans TablePress, puis la placez sur une page Elementor avec le widget table TablePress ou avec un shortcode La table garde son tri, sa recherche et sa pagination.
Ce guide couvre les deux méthodes, le style et le réglage qui fixe les tables larges sur les téléphones Il dit également quand un widget de table simple est le meilleur choix Tout ici a été testé avec TablePress 3.4 et Elementor 4.3.
Table des matières
Étape 1 : Créer ou importer la table dans TablePress
La table elle-même est réalisée en dehors d'Elementor, sur les écrans TablePress du tableau de bord WordPress.
- Installer et activer TablePresse à partir de plugins, ajoutez un nouveau.
- Ouvrir TablePresse dans le menu du tableau de bord.
- Pour taper un tableau, cliquez sur Ajouter Nouveau: saisissez un nom, définissez le nombre de lignes et de colonnes et remplissez les cellules.
- Pour apporter une feuille de calcul, cliquez sur Importation, choisissez Téléchargement de fichiers(en), sélectionnez le fichier, conservez Ajouter comme nouveau tableau et cliquez Importation.
- Notez l'ID de la table La première table est l'ID 1.
TablePress importe des fichiers Excel, CSV, HTML et JSON Nous avons importé un CSV à six lignes de tarifs d'expédition, et il est arrivé avec la première ligne déjà définie comme en-tête.
Étape 2 : Ajoutez-le avec le widget de table TablePress
TablePress enregistre son propre widget Elementor, cette méthode ne nécessite donc pas de shortcode.
- Modifiez votre page avec Elementor.
- Recherchez dans le panneau du widget TablePresse.
- Faites glisser le widget dans un conteneur.
- Ouvrir le Tableau déposez et choisissez votre table Les tableaux sont répertoriés par identifiant et par nom.
- Publier la page.
Le Avancé la section sous la liste déroulante contient un champ Paramètres de configuration. Il accepte les mêmes paramètres que vous mettriez dans un shortcode, pour les cas où une page doit afficher le tableau avec différentes options.
Ou ajoutez-le avec un shortcode
Le shortcode fait le même travail et fonctionne partout où les shortcodes le font.
- Élémenteur de drag Code court widget dans un conteneur.
- taper à la
[table id=1 /]1, en remplaçant 1 par l'ID de votre table. - Cliquez Appliquer pour charger l'aperçu.
Sur notre page de test le widget et le shortcode ont imprimé la même table Utilisez le widget quand vous le pouvez, car le fait de choisir dans une liste déroulante évite les fautes de frappe dans l'ID.
Tri, recherche et pagination
Ceux-ci sont allumés pour chaque nouvelle table Vous les changez par table, dans la case nommée Caractéristiques du tableau pour les visiteurs du site sur l'écran d'édition de la table.
| Réglage | Ce qu'il fait | Défaut |
|---|---|---|
| tri | Les visiteurs cliquent sur un en-tête pour trier selon cette colonne | Sur |
| Recherche/Filtrage | Ajoute une zone de recherche qui filtre les lignes | Sur |
| pagination | Affiche un nombre défini de lignes par page | Sur, 10 rangées |
| Changement de longueur de pagination | Permet aux visiteurs de modifier les lignes par page | Sur |
| Infos | Affiche “Affichage de 1 à 6 sur 6 entrées” | Sur |
| Défilement horizontal | Défile de larges tables à l'intérieur de leur boîte | en congé |
Pour un tableau à six lignes, la recherche et la pagination sont encombrantes. Décollez-les et le tableau apparaît sous forme de grille simple.
Coiffage d'une table TablePress en Elementor
Le widget de table TablePress n'a pas de contrôle de style de table dans Elementor, donc le look est défini à trois autres endroits.
- Options de table sur l'écran d'édition de la table : quelles lignes sont l'en-tête et le pied de page, Couleurs de rangée alternées, Surlignement du vol stationnaire& un Cours CSS supplémentaires champ.
- Css personnalisé pour les couleurs, les polices et les bordures TablePress donne à chaque table une classe basée sur son ID, afin que vous puissiez cibler une table.
- L'onglet Avancé du widget dans Elementor pour la marge, le rembourrage et la largeur autour de la table.
Un court exemple CSS qui restylise l'en-tête du tableau 1 :
.tablepress-id-1 thead th {
background: #101223;
color: #ffffff;
}
.tablepress-id-1 tbody td {
padding: 12px 16px;
}Collez-le dans Apparence, Personnaliser, CSS supplémentaire, ou dans n'importe quelle boîte CSS personnalisée de votre configuration. Elementor Pro en a un par élément et les modules complémentaires principaux Extension CSS personnalisée ajoute un également.
Fixez la table sur les téléphones
Sur un téléphone de 390 px de large, notre table à cinq colonnes passait devant le bord droit de l'écran et la dernière colonne ne pouvait pas être lue.
- Modifier le tableau dans TablePress.
- Sous Caractéristiques du tableau pour les visiteurs du site, cochez Défilement horizontal.
- Cliquez Enregistrer Modifications et rechargez la page sur votre téléphone.
TablePress vend également une fonctionnalité Tables réactives dans son plan Pro (89 $ par an lorsque nous avons vérifié), avec des modes qui empilent ou effondrent les lignes sur de petits écrans D'autres façons de gérer les tables larges sont dans notre guide tables réactives dans Elementor.
Quand un widget de table est le meilleur choix
TablePress est construit pour les données Pour une petite table qui fait vraiment partie de la conception de la page, il ajoute des étapes : un deuxième écran d'administration, CSS à un autre endroit et un plugin pour rester à jour.
| Votre table | Meilleur outil |
|---|---|
| Plus d'environ 30 rangées, ou il provient d'Excel ou CSV | TablePresse |
| Les visiteurs doivent trier, rechercher ou parcourir | TablePresse |
| Moins de 30 lignes, tapées à la main, conçues pour correspondre à la page | Un widget de table |
| Les cellules ont besoin d'icônes ou d'images, ou de cellules fusionnées | Un widget de table |
| Les lignes doivent être empilées dans des cartes sur des téléphones sans forfait payant | Un widget de table |
Seulement besoin d'une petite table ? Le Widget Table dynamique le construit dans le panneau Élémenteur, avec un onglet Style et des lignes qui s'empilent sur les téléphones.
Dynamic Table n'a pas de tri, de recherche ou d'importation, alors utilisez TablePress pour les données et le widget pour les tableaux de mise en page tels qu'un calendrier ou une fiche technique. Les autres options sont comparées dans notre Rassemblement des plugins de table d'élément.
Questions fréquemment posées
TablePress fonctionne-t-il avec Elementor ?
Oui. TablePress 3.4 ajoute un widget de table TablePress au panneau Elementor, et son shortcode fonctionne dans le widget Shortcode d'Elementor. Aucun plugin supplémentaire n'est nécessaire pour les connecter.
Comment ajouter une table TablePress à une page Elementor ?
Créez la table dans TablePress, modifiez la page avec Elementor, recherchez le widget de table TablePress, faites-le glisser et choisissez votre table dans la liste déroulante Table Vous pouvez également coller [id de table=1 /] dans le widget Shortcode, en utilisant l'ID de votre table.
TablePress est-il gratuit ?
Le plugin TablePress sur WordPress.org est gratuit et comprend l'importation, l'exportation, le tri, la recherche et la pagination Les forfaits Paid Pro et Max ajoutent des fonctionnalités telles que des tables réactives, des lignes et colonnes fixes et des importations automatiques.
Comment styliser une table TablePress dans Elementor ?
Le widget Elementor n'a pas de contrôle de style de table Définissez des rayures et mettez en surbrillance dans les options de table de la table, et changez de couleur et de polices avec un CSS personnalisé qui cible la classe de la table, par exemple .tablepress-id-1.
Pourquoi ma table TablePress est-elle coupée sur mobile ?
Le défilement horizontal est désactivé par défaut, de sorte que les tables larges débordent de l'écran Modifiez la table, cochez Défilement horizontal sous les fonctionnalités de la table pour les visiteurs du site et enregistrez La table défile ensuite latéralement dans sa propre boîte.
Réflexions finales
TablePress et Elementor s'emboîtent bien pour les tables de données : importez le fichier, déposez dans le widget de table TablePress, et pensez à activer le défilement horizontal pour les téléphones Le style prend un peu de CSS car le widget n'a pas d'onglet Style.
Pour les tableaux courts qui devraient ressembler à une partie de la page, Tableau dynamique conserve les cellules et le style à l'intérieur d'Elementor.
Lecture connexe
