Finsweet Table : Simplifiez la création de tableaux HTML dans Webflow

Introduction :

Jusqu'à récemment, les tableaux HTML étaient un maillon manquant dans l'arsenal de conception de Webflow. Vous pouviez bidouiller avec des éléments Grid pour créer l’illusion, mais ça relevait parfois plus de l'acrobatie que de la conception intuitive.

Avec la nouvelle Webflow App Finsweet Table, vous pouvez maintenant créer des tableaux HTML directement dans l'environnement Webflow sans avoir à vous casser la tête.

Dans cet article, on va explorer Finsweet Table, découvrir comment il va simplifier la création de tableaux HTML dans Webflow, et vous montrer comment vous pouvez créer et personnaliser vos tableaux étape par étape dans Webflow.

Les avantages de Finsweet Table

Les tableaux sont un élément incontournable de la conception web, mais leur création dans Webflow pouvait parfois être un casse-tête. Finsweet Table vient largement simplifier ça.

Des tableaux HTML sémantiques

C’était une fonctionnalité très demandée dans Webflow : vous pouvez maintenant créer de vrais tableaux HTML sans compromis et facilement personnalisables dans Webflow.

La création et l’ajout de donnée simplifiée

Jusque là, pour afficher des données sous forme de tableau sur Webflow, vous deviez utiliser des éléments Grid, ce qui était assez peu intuitif. Avec Finsweet Table, vous pouvez maintenant créer des tableaux de manière visuelle et, surtout, ajouter de la donnée très facilement, comme vous le feriez dans un tableur Google Sheet par exemple, ce qui peut représenter un gain de temps considérable.

Des tableaux avec une meilleure accessibilité

Un autre avantage de pouvoir créer de vrais tableaux HTML est l’amélioration de leur accessibilité. Les tableaux que vous créez avec Finsweet Table sont naturellement accessibles aux lecteurs d'écran et respectent les normes du web, améliorant ainsi l'expérience utilisateur pour tous et le référencement de votre site.

Personnalisation à souhait

Enfin, Finsweet Table vous donne un contrôle total sur le design de vos tableaux. Vous pouvez ajouter des classes CSS à chaque élément pour personnaliser son apparence selon vos besoins. Le tout, sans quitter le Designer de Webflow.

Maintenant qu’on a fait le tour des avantages de Finsweet Table, dans la prochaine section, on plonge dans un tutoriel pour vous montrer pas à pas comment en tirer parti en créant votre propre tableau HTML. Préparez-vous à découvrir à quel point ça peut simplifier votre workflow dans Webflow !

Comment créer des tableaux HTML avec Finsweet Table

Maintenant qu’on a exploré les avantages de Finsweet Table, passons à du concret ! Dans cette section, on va vous guider à travers un tutoriel pas à pas sur la création d'un tableau HTML.

Étape 1 : Installez Finsweet Table

La première étape consiste à installer Finsweet Table dans votre projet Webflow. Vous pouvez le faire depuis le panneau des applications de Webflow Apps. Une fois que vous avez installé l'outil sur votre site, vous êtes prêt à commencer.

Étape 2 : Créez votre tableau depuis votre Designer

Une fois Finsweet Table installé, vous pouvez lancer l’application depuis le Designer Webflow. Cliquez sur l’onglet Apps dans la barre latérale de gauche et lancez Finsweet Table.

Vous serez accueilli par une interface qui vous permettra de créer votre tableau, de choisir le nombre de lignes et de colonnes, et d’ajuster tout un tas d’option. Cette flexibilité vous permet de créer des tableaux simples ou complexes en fonction de vos besoins.

Finsweet Table facilite également l'importation de données. Vous pouvez simplement copier et coller des données tabulaires à partir de feuilles de calcul ou de toute autre source dans l'outil. L’App reconnaît ces données et les importe automatiquement dans votre tableau.

Toutes les options disponibles :

• Mode d’ajout de données : manuel, copié-collé depuis un tableur, ou téléchargement d’un fichier CSV.
• Nombre de colonnes et de rangées.
• Présence ou non d’éléments spécifiques : légende, header, footer.
• Modification des classe CSS des différents éléments :
  composant du tableau (table),
  rangée (tr),
  cellule (td),
  groupe de rangées du header (thead),
  cellule du header (th),
  groupe de rangées du body (tbody),
  groupe de rangées du footer (tfoot),
  légende (caption).

Ajoutez vos données, ajustez les options selon vos besoins, et une fois votre tableau prêt, cliquez sur “Insert component on page” pour ajouter votre tableau sur votre page. Une fois le composant ajouté, vous serez prêt à en personnaliser l’apparence.

Étape 3 : Personnaliser l’apparence de votre tableau

L'un des avantages majeurs de Finsweet Table est la possibilité de personnaliser votre tableau en profondeur, très facilement. Une fois ajouté à votre page, vous pouvez modifier l'apparence de votre tableau en modifiant simplement les classes CSS de chaque élément (rangées, en-têtes, cellules, etc).

Vous n'êtes limité que par votre créativité et cette personnalisation vous permet de créer des tableaux qui s'intègrent parfaitement à votre design Webflow.

Étape 4 : Éditez et mettez-à-jour en temps réel

Enfin, une fois votre tableau intégré dans votre page, vous pouvez toujours l'éditer et le mettre à jour depuis le Designer, comme pour n’importe quel autre élément créé dans Webflow.

Dans la section suivante, on explore quelques exemples d'utilisation de Finsweet Table pour vous donner des idées sur la façon dont l’outil peut améliorer vos projets Webflow !

Quelques exemples d'utilisation de Finsweet Table

Pour finir, voyons comment Finsweet Table peut être un bon atout dans votre boîte à outils. Explorons quelques exemples concrets d'utilisation de l’App.

Exemple 1 : Tableau de tarification

Exemple 2 : Tableau de comparaison de produits

Exemple 3 : Tableau de classement

Ces exemples ne sont que la pointe de l'iceberg. Finsweet Table offre une nouvelle polyvalence pour la création de tableaux HTML dans Webflow, et les possibilités sont illimitées.

Conclusion

Et voilà, vous avez maintenant toutes les clés en main pour tirer le meilleur parti de Finsweet Table, la nouvelle App Webflow qui rend la création de tableaux HTML plus facile que jamais sur Webflow.

N'hésitez pas à explorer davantage Finsweet Table, à expérimenter avec ses fonctionnalités et à l'intégrer dans vos projets Webflow.

Pour aller plus loin :

• Lire l'article : Découvrez le nouveau Webflow Apps (+7 Apps à utiliser pour vos prochains projets)
• Lire l’article : Sublimez vos designs avec des images de l'App Webflow Unsplash
• Lire l’article : Comment intégrer HubSpot sur Webflow avec Webflow Apps
• Regarder la vidéo YouTube : Intégration HubSpot sur votre site Webflow avec Webflow Apps