Webflow sync, pageviews & more.
NEW

How can I add ad-hoc HTML tables in my CMS Richtext content in Webflow without the need for clients to edit HTML markup directly?

TL;DR
  • Add a CMS Embed or Plain Text field to hold generated HTML table code and insert it via a custom Embed element on template pages.
  • Style reusable responsive tables as Symbols for static content or use shortcodes with JavaScript for advanced dynamic rendering without exposing raw HTML to clients.

Webflow's native CMS Rich Text field doesn't support tables, and clients cannot use an HTML table interface directly. However, you can implement a user-friendly workaround using Custom Embeds combined with third-party table generators or Symbols.

1. Use Embed Fields in the CMS

  • In your CMS Collection, add a Plain Text or Embed field for the table HTML.
  • Use a table generator (e.g., https://truben.no/table/) to create the necessary HTML code.
  • Paste the generated HTML into that Embed field.
  • Embed fields are not editable in the Rich Text Editor, but Admins can paste the code during content setup.

2. Reference the Embed Field Below the Rich Text

  • In your CMS Template Page, add a Rich Text element connected to your Rich Text field.
  • Below or above that, insert an Embed element and connect it dynamically to your Embed field.
  • This keeps table code out of the Rich Text itself but still renders correctly.

3. Optional: Use Symbols as Table Templates

  • Build custom responsive table layouts using Div blocks and Text blocks, styled to look like tables.
  • Convert this into a Symbol, then reuse it across CMS items.
  • This only works for static content or repeatable layouts—not for dynamic data-driven tables.

4. Prevent Clients From Editing Raw HTML

  • If clients must manage content, limit their access to only the Rich Text field via Editor Roles.
  • Assign a developer/editor to handle table embedding using the Embed field to ensure HTML remains valid.

5. Use Custom Attributes or Scripts (Advanced)

  • Alternatively, build a solution where editors add simple shortcodes like [table id="xyz"] into the Rich Text.
  • Then use JavaScript or Webflow’s Custom Code to replace that shortcode with rendered table content.
  • This is complex to maintain but gives the illusion of CMS-native tables without raw HTML.

Summary

Since Webflow CMS Rich Text doesn't support tables, the best workaround is to use a separate Embed Field for table HTML or create table Symbols. This avoids clients needing to edit HTML directly while still allowing tables to appear in CMS content.

Rate this answer

Other Webflow Questions