Finsweet Table: Simplify HTML table creation in Webflow

Introduction:

Until recently, HTML tables were a missing link in Webflow's design arsenal. You could fiddle with Grid elements to create the illusion, but this was sometimes more acrobatic than intuitive design.

With the new Webflow App Finsweet Table, you can now create HTML tables directly in the Webflow environment without having to break the bank.

In this article, we'll explore Finsweet Table, discover how it will simplify the creation of HTML tables in Webflow, and show you how you can create and customize your tables step by step in Webflow.

The benefits of Finsweet Table

Tables are an essential element of web design, but creating them in Webflow could sometimes be a headache. Finsweet Table greatly simplifies the task.

Semantic HTML tables

This was a much-requested feature in Webflow: now you can create real, uncompromising and easily customizable HTML tables in Webflow.

Simplified data creation and addition

Until now, to display data in table form on Webflow, you had to use Grid elements, which was rather unintuitive. With Finsweet Table, you can now create tables visually and, above all, add data very easily, as you would in a Google Sheet spreadsheet, for example, which can be a considerable time-saver.

Boards with improved accessibility

Another advantage of being able to create real HTML tables is their improved accessibility. The tables you create with Finsweet Table are naturally accessible to screen readers and comply with web standards, improving the user experience for all and your site's SEO.

Customize as you wish

Finally, Finsweet Table gives you total control over the design of your tables. You can add CSS classes to each element to customize its appearance to your needs. All without leaving the Webflow Designer.

Now that we've covered the benefits of Finsweet Table, in the next section we dive into a step-by-step tutorial to show you how to take advantage of it by creating your own HTML table. Get ready to discover just how much it can simplify your Webflow workflow!

How to create HTML tables with Finsweet Table

Now that we've explored the benefits of Finsweet Table, let's get down to business! In this section, we'll take you through a step-by-step tutorial on how to create an HTML table.

Step 1: Install Finsweet Table

The first step is to install Finsweet Table in your Webflow project. You can do this from the Webflow Apps panel. Once you've installed the tool on your site, you're ready to get started.

Step 2: Create your panel from your Designer

Once Finsweet Table has been installed, you can launch the application from the Webflow Designer. Click on the Apps tab in the left-hand sidebar and launch Finsweet Table.

You'll be greeted by an interface that lets you create your table, choose the number of rows and columns, and adjust a whole host of options. This flexibility allows you to create simple or complex tables to suit your needs.

Finsweet Table interface, Webflow Designer

Finsweet Table also makes it easy to import data. You can simply copy and paste tabular data from spreadsheets or any other source into the tool. The App recognizes this data and automatically imports it into your table.

All available options :

How to add data: manually, copy and paste from a spreadsheet, or download a CSV file.
Number of columns and rows.
Presence or absence of specific elements: caption, header, footer.
Modification of CSS classes for various elements:
table component (table),
row (tr),
cell (td),
header row group (thead),
header cell (th),
body row group (tbody),
footer row group (tfoot),
caption.

Add your data, adjust the options according to your needs, and once your table is ready, click on "Insert component on page" to add your table to your page. Once the component has been added, you're ready to customize its appearance.

Step 3: Customize the appearance of your table

One of the major advantages of Finsweet Table is the ability to customize your table in depth, very easily. Once added to your page, you can modify the appearance of your table by simply modifying the CSS classes of each element (rows, headers, cells, etc.).

You're limited only by your creativity, and this customization lets you create tables that blend seamlessly with your Webflow design.

Step 4: Edit and update in real time

Finally, once your table has been integrated into your page, you can always edit and update it from the Designer, as you would any other element created in Webflow.

In the following section, we explore a few examples of how Finsweet Table can be used to give you ideas on how the tool can enhance your Webflow projects!

Some examples of Finsweet Table use

Finally, let's take a look at how Finsweet Table can be a valuable addition to your toolbox. Let's explore some concrete examples of using the App.

Example 1: Pricing table

Example 2: Product comparison chart

Example 3: Classification table

These examples are just the tip of the iceberg. Finsweet Table offers a new versatility for creating HTML tables in Webflow, and the possibilities are endless.

Conclusion

And now you've got all the keys you need to make the most of Finsweet Table, the new Webflow App that makes creating HTML tables on Webflow easier than ever.

Feel free to explore further Finsweet Tableand integrate it into your Webflow projects.

To find out more :