As much as I love Webflow, their rich-text editor in CMS (or lack thereof) is the bane of my existence.
Webflow’s CMS is an incredibly versatile tool for managing dynamic content. After all, it lets you create and organize everything from blog posts to product listings.
Still, somehow in 2024, Webflow lacks a native support for tables. Absurd, I know but what can you do?
Since Webflow doesn’t provide built-in table elements, adding them requires a workaround using custom HTML and CSS. Generate the HTML and CSS, and then embed it into your Webflow CMS pages using a custom code block.
Note: However, this requires a Webflow plan that supports custom code.
Methods for Adding HTML Tables to Webflow CMS
There are two primary methods for obtaining the HTML markup for your tables:
Method 1: Using External Sites to Generate HTML Table Code
Several external tools help you create visually structured tables with the HTML and CSS provided, making it simple to copy and paste the output directly into your CMS pages.
1. Choose an External Site for Table Creation
- HTML Tables: A user-friendly table generator that allows you to create basic tables with customizable headers and rows.
- DataTables: A more advanced tool offering interactive tables with features like sorting, filtering, and pagination.
2. Design Your Table
Using either tool, design the table structure that suits your needs. For example, add headers to the table for categories like "Price," "Feature," or "Date." Next, insert the data for each row in the table.
3. Generate the HTML and CSS
Once your table is designed, the tool will provide the necessary HTML code. Some tools, like DataTables, will also generate CSS for styling the table.
4. Copy the HTML and CSS
Copy the generated HTML code for the table. If there's accompanying CSS, make sure to grab that as well.
5. Embed the Table in Webflow
- Open your Webflow project and navigate to the CMS collection page where you want the table to appear.
- Add a Custom Code Embed Element to the page. This is the element that allows you to insert custom HTML into Webflow.
- Paste the HTML table code into the Embed Element.
- If the tool provides additional CSS, insert it in the Embed Element or add it to the project's Custom Code section in Project Settings for global styling.
Method 2: Using the Finsweet Table App
For a more Webflow-centric approach, the Finsweet Table App allows you to create tables that follow Webflow's design principles.
This method is ideal if you want more control over the look and feel of your tables without writing HTML or CSS manually.
1. Design Your Table
Within the Finsweet Table App, you can create a table by adding rows, columns, and headers. The app provides a straightforward interface for inputting your table data.
Customize the table's appearance, including fonts, colors, borders, and more, to ensure it aligns with your website's design language.
2. Generate the Table Code
Once your table is designed, Finsweet will generate the HTML and CSS code. This code is optimized for use within Webflow, ensuring compatibility with Webflow's CMS.
3. Copy the HTML and CSS
Copy the generated code for your table. The app will provide both the HTML for the table structure and CSS for the styling.
4. Embed the Table in Webflow
- Go back to Webflow, open your project, and navigate to the CMS collection page where you want the table to appear.
- Add a Custom Code Embed Element in the desired location.
- Paste the HTML and CSS code into the Embed Element.
Which Method Should You Choose?
Use Method 1 (External Sites) if you need a quick, functional table and don't require extensive styling. HTMLTables and DataTables are great for basic tabular data.
Use Method 2 (Finsweet Table App) for a more polished table that seamlessly fits into Webflow's design system.
The Finsweet Table App offers more visual control and customization, making it ideal for more design-conscious users.
Styling HTML Tables in Webflow
Once HTML table is embedded properly, the next step is to make sure it looks visually appealing and matches your site’s overall design.
1. Adding Custom CSS in Webflow
Webflow lets you add custom CSS either within the embed element itself or in the global Project Settings.
Within the embed element: If your table is only used in one specific location, you can insert custom CSS directly into the same embed element where you’ve placed the HTML.
This code applies styling directly to your table, making it more readable with clear borders, padding, and a highlighted header row.
In Project Settings: If you’re using tables across multiple pages or CMS items, it’s better to add your CSS globally. Head to Project Settings > Custom Code and insert the CSS under the Head Code section.
This way, the same styles will apply to every table on your site.
2. Key Elements to Style
When styling HTML tables in Webflow, focus on the following elements to improve readability and visual hierarchy:
Table Rows (<tr>) and Data Cells (<td>): Add padding and borders to clearly separate your table data. You can also alternate row colors for better distinction between rows (commonly called zebra striping).
Header Cells (<th>): Use bold fonts, background colors, and padding for header cells to differentiate them from the rest of the data.
Borders and Spacing: By default, tables often have minimal separation between rows and columns. Adjust the borders and cell spacing to optimize your tables.
Making HTML Tables Responsive
One of the major challenges of using traditional HTML tables in modern web design is responsiveness. While tables work well on desktop, they can become difficult to read on mobile devices due to the rigid structure.
With that said, responsive design doesn’t grow out of templates magically. There’s a definite code behind it and I’ll help you recreate that for your tables.
Method 1: Overflow Scroll Method
The simplest way to handle wide tables on small screens is to enable horizontal scrolling. This allows users to scroll horizontally to view all the data without disrupting the layout of your page.
Add Custom CSS for Overflow Scroll: Insert the following CSS either directly in the Embed Element or in your Project Settings using the table wrapper class.
Wrap Your Table in a Div: In the Embed Element where you’ve added the table HTML, wrap the entire table with a div that has the class table-wrapper.
Test on Mobile Devices: Once you’ve enabled scrolling, preview your Webflow page on smaller screens (mobile and tablet) to ensure users can easily scroll through the table without it breaking the layout.
Method 2: Stacking Table Rows for Mobile
For a more user-friendly mobile experience, you can make the table rows stack vertically. This is especially useful for tables with minimal columns.
Add Custom CSS for Row Stacking: Insert the following CSS to stack table rows vertically on mobile devices:
Add Data Labels to Each Table Cell: In the HTML table code, add the data-label attribute to each <td> element. This ensures that when the table stacks, the data still has context.
<td data-label="Price">$99</td>
Preview and Test: Switch to Webflow’s mobile breakpoint and preview how the table looks when stacked. The data labels will appear on the left, and the corresponding values will stack vertically below.
