Principaux points à retenir
- Elementor n'a pas de widget de table dans le plugin principal ou dans Elementor Pro, donc une table dans Elementor provient du code HTML, des conteneurs, d'un plugin de table ou d'un widget d'addon.
- Le widget HTML est le moyen de créer une table dans Elementor sans plugin : collez des balises table, tr, th et td et ajoutez un bloc de style court pour les bordures et le remplissage.
- Un conteneur Grid peut imiter une table, mais une table à 3 colonnes et 4 lignes nécessite 12 widgets Text Editor distincts et le résultat n'est pas une véritable table HTML.
- TablePress 3.4 ajoute son propre widget Elementor appelé TablePress table, et ses tables peuvent être triées, recherchées et paginées par les visiteurs.
- Le widget Table dynamique Master Addons construit une véritable table HTML à partir des cellules d'en-tête et de corps dans le panneau Élémenteur et empile les lignes dans les cartes sur des appareils jusqu'à 768 px de large.
Pour créer une table dans Elementor, vous avez besoin d'une solution de contournement, car Elementor n'expédie pas de widget de table Les quatre qui fonctionnent sont un widget HTML avec votre propre code, un conteneur Grid, une table TablePress et un widget addon tel que Tableau dynamique.
Nous avons construit une table de chacune des quatre manières sur Elementor 4.3 et avons regardé chacune d'entre elles sur un bureau et sur un téléphone.
Table des matières
Elementor a-t-il un widget de table ?
N° Recherche de “table” dans le panneau Élémenteur et les seuls résultats intégrés sont Table des matières et Tableau des prix, et les deux appartiennent à Elementor Pro. Aucun des deux ne fait de lignes et de colonnes de données Le Tableau des prix est une seule carte de prix, et la Table des matières répertorie les titres sur la page.
De quelle manière devriez-vous utiliser ?
Choisissez la taille de la table et qui la modifiera plus tard.
| Chemin | Plugin nécessaire | Meilleur pour | Attention à |
|---|---|---|---|
| Widget HTML | Aucun | Un petit tableau, édité par quelqu'un qui lit HTML | Chaque changement signifie modifier le code |
| Conteneur grillagé | Aucun | Quelques cellules qui ont besoin de boutons ou d'images | Un widget par cellule, et ce n'est pas une vraie table |
| TablePresse | TablePresse | Tables longues, importations CSV ou Excel, tri et recherche | Le style se produit en dehors d'Elementor |
| widget de table | Un addon tel que Master Addons | Horaires, fiches techniques et listes de prix que vous modifiez dans Elementor | Pas de tri ni d'importation dans Dynamic Table |
Voie 1 : Créer une table dans Elementor avec le widget HTML
C'est la façon de faire un tableau dans Elementor sans plugin Vous écrivez un tableau HTML simple et Elementor l'imprime tel quel.
- Modifier la page avec Elementor et faire glisser le html widget dans un conteneur.
- Collez le code ci-dessous dans le Code HTML champ.
- Modifier le texte entre les balises Chacun
trest une rangée, chacunethest une cellule d'en-tête et chacunetdest une cellule du corps. - Cliquez Publier.
<table class="simple-table">
<thead>
<tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
<tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
<tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
</tbody>
</table>
<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>
La table est légère et c'est un vrai table element, que les moteurs de recherche et les lecteurs d'écran comprennent Il est plus difficile à maintenir, cependant Un client qui veut ajouter une ligne doit modifier HTML, et une balise de fermeture manquante brise la mise en page.
Voie 2 : Construire une table avec un conteneur Grid
Un conteneur Grid dispose des widgets en lignes et colonnes, de sorte qu'il peut ressembler à une table Il convient à un petit bloc où les cellules tiennent des boutons, des icônes ou des images.
- Ajouter un conteneur et un ensemble Disposition des conteneurs à Grille.
- Définir Colonnes au nombre de colonnes dont vous avez besoin et Lignes au nombre de lignes, en-tête inclus.
- Définir Lacunes à 0 pour que les cellules se touchent.
- Faites glisser un Éditeur de texte widget dans chaque cellule et tapez son texte.
- Sur chaque widget ouvert Avancé, puis ajoutez Rembourrage et un 1px Frontière. Donnez aux cellules d'en-tête une couleur d'arrière-plan.
Le nombre de widgets croît rapidement Trois colonnes et quatre lignes ont déjà besoin de 12 widgets, et une table 5 par 10 a besoin de 50. les frontières doublent là où les cellules se rencontrent à moins que vous n'accordiez chaque côté La sortie est un ensemble de divs, donc un lecteur d'écran ne l'annonce pas comme une table Gardez cette méthode pour une poignée de cellules.
Voie 3 : Ajouter une table TablePress à Elementor
TablePress est un plugin de table avec plus de 600 000 installations actives Vous construisez la table sur son propre écran d'administration et ensuite le placez dans Elementor C'est le bon choix pour les tables longues, car il importe des fichiers Excel, CSV, HTML et JSON et permet aux visiteurs de trier, rechercher et page à travers les lignes.
- Installer et activer TablePresse.
- Aller à TablePresse, alors Ajouter Nouveau pour taper un tableau, ou Importation pour télécharger un fichier.
- Enregistrez la table et notez son ID.
- Modifiez votre page avec Elementor et recherchez TablePresse. Faites glisser le widget et choisissez votre table dans le Tableau baisse.
- Si vous préférez un shortcode, faites glisser le Code court widget et entrez
[table id=1 /]avec votre propre ID.
Le widget n'a pas d'onglet Style, donc les couleurs et les polices proviennent des paramètres TablePress et de votre propre CSS. Sur notre téléphone de test 390 px, la table à cinq colonnes passait également au-delà du bord droit jusqu'à ce que nous nous allumions Défilement horizontal dans les réglages de la table.
Voie 4 : Utiliser un widget de table
Un widget addon conserve toute la tâche à l'intérieur d'Elementor Vous tapez des cellules dans le panneau et vous stylisez la table dans l'onglet Style, de la même manière que vous travaillez avec n'importe quel autre widget Nous utiliserons ici le widget Table dynamique de Master Addons.
- Installez Master Addons et vérifiez cela Tableau dynamique est activé dans ses paramètres de widget.
- Modifier la page avec Elementor, rechercher Tableau dynamique et faites-le glisser Cela commence par un exemple de tableau à quatre colonnes.
- Ouvrir Tête de table. Ajouter un Cellule d'en-tête de tableau par colonne et tapez chacune Nom de la colonne.
- Ouvrir Tableau Corps. Ajouter un Tableau Cellule du corps par cellule, de gauche à droite. Allumez Nouvelle rangée? sur la première cellule de chaque ligne après la première.
- Pour fusionner des cellules, ouvrez celle d'une cellule options onglet et ensemble Vague de colonne ou Portée de la rangée.
- Stylez l'en-tête, le corps et les rayures dans le modeler tab, puis publier.
Chaque cellule peut contenir du texte, une icône ou une image, et les champs de texte acceptent les balises dynamiques. Tableau réactif? dans la section Paramètres est activé par défaut, donc sur les appareils jusqu'à 768 px de large, chaque ligne devient une carte avec les noms de colonnes comme étiquettes.
Vous voulez le voir avant d'installer quoi que ce soit ? Le Page Tableau dynamique dispose de trois tables live et de huit mises en page de démonstration que vous pouvez ouvrir.
Tableau dynamique ne trie, ne recherche, ne pagine ni n'importe les fichiers Chaque cellule est tapé à la main, ce qui est très bien pour 30 cellules et fatiguant pour 300, donc pour les ensembles de données volumineuses, retournez à la Voie 3.
Erreurs à éviter
- Construction du tableau dans le widget Éditeur de texte. Il n'a pas de bouton de table, donc vous finissez par écrire du HTML dans son onglet Texte de toute façon Le widget HTML est l'endroit plus propre pour ce code.
- Utilisation d'un widget de tarification pour les données. Tableau des prix et Tableau des prix les widgets sont construits pour les plans avec un bouton d'achat Ils sont la mauvaise forme pour les rangées de données.
- Oubli des téléphones. Une table à cinq colonnes s'adapte rarement à un écran de 390 px Décidez si les lignes doivent s'empiler, défiler latéralement ou perdre une colonne.
- Construire 50 cellules à partir de widgets. Si la méthode de grille nécessite plus d'une douzaine de widgets, passez à une table réelle.
Questions fréquemment posées
Comment créer une table dans Elementor sans plugin ?
Faites glisser le widget HTML sur la page et collez le code de la table composé de balises table, tr, th et td, ainsi qu'un court bloc de style pour les bordures et le remplissage. Pour quelques cellules, vous pouvez également définir un conteneur sur Grid et placer un widget Text Editor dans chaque cellule.
Elementor Pro a-t-il un widget de table ?
No. Elementor Pro ajoute la Table des Prix et la Table des Matières, et aucune ne crée de lignes et de colonnes de données Pour une table de données vous avez toujours besoin de HTML, d'un plugin de table tel que TablePress, ou d'un widget addon.
Quel est le moyen le plus simple d'ajouter un tableau dans Elementor ?
Pour une table que vous allez modifier à l'intérieur d'Elementor, un widget de table est le plus simple, car les cellules et le style se trouvent dans le panneau Pour une longue table qui existe déjà sous forme de feuille de calcul, l'importation du fichier dans TablePress est plus rapide que de le taper.
Puis-je copier un tableau d'Excel dans Elementor ?
Pas directement dans un widget Enregistrez la feuille sous forme de fichier CSV ou Excel et importez-la dans TablePress, puis placez cette table avec le widget TablePress table. Le collage d'un bloc de cellules dans un widget table met tout cela dans une cellule.
Les tables Elementor sont-elles réactives ?
Cela dépend de la façon dont la table a été faite Une table HTML garde ses colonnes et peut déborder sur un téléphone à moins que vous n'ajoutiez CSS. La Table Dynamique empile les lignes dans les cartes à 768 px et en dessous. TablePress a une option de défilement horizontal dans les paramètres de chaque table.
Réflexions finales
Il existe quatre façons de créer une table dans Elementor Utilisez le widget HTML pour une petite table et aucun plugin, un conteneur Grid pour quelques cellules avec des boutons ou des images, TablePress pour les données longues ou importées et un widget table lorsque vous souhaitez éditer et styliser la table dans Elementor.
Si le dernier convient, Tableau dynamique fait partie de Additions maîtres avec ses autres widgets.
Lecture connexe
