I recently needed the ability to put small ad-hoc HTML tables in my CMS Richtext content, which is not natively supported in Webflow. Since I needed the ability for clients to edit these tables without being confronted with full HTML markup, I ended up using Markdown chunks inside of my Richtext content.
This approach ended up being much slicker than I expected- I’m very please with the results and the versatility it gives me. Here’s a video with the implementation details.
Thanks Jeff, keen to know what you think. The solution ended up very elegant- my biggest reflection is regarding whether the <markdown> element wrapper is necessary.
It gives me more placement versatility for my MD chunks, but for most users, I think that they’d only be using MD inside of richtext elements, and may use richtext embeds exclusively for MD content.
In that case, I can locate the MD with .w-richtext .w-embed and eliminated the markup requirement. I’ll do some testing with showdown-js as well to see if it can handle mixed MD/HTML content. That would be even slicker.
Hi @memetican that is partially true but in RTE is option add Embed where you can create your table with standard HTML tags. I now that is not Ideal either but IMO there is no need introducing JS library for such simple task.Your solution is valid and there are also another ways or libraries.
here is link to Read Only and Live example I have done jus now to prove it.
But I agree that creating table in MD may be simpler for client who has no dev knowledge.
thanks for sharing, great job
For small ad-hoc tables, the problem is that my clients aren’t familiar with HTML. I could require them to use other online table-gen tools, and copy-paste, but Markdown offers the perfect balance between readability and editability.
For large tables, I have a different solution entirely that sources from a Google Sheet and automates the HTML translation into the page. It requires a bit more setup, but well worth it - I wouldn’t want clients debugging large chunks of MD.
Hey there, I’m not sure who this might be for but today I tried a really simple solution for formatting a table using a Rich Text Element and filling it from my Webflow Collection. It worked perfectly for my use case, so thought I’d share. The explanation is inside the screenshots.
Basically what it does, you style a Rich Text Element as a Table using borders and make the Paragraphs inside the Webflow CMS do the work of “splitting” the table for you. Let me know if anything’s unclear.
Thanks for the guide!
However it seems like it does not support any mobile integration (or any other breakpoint for what it is worth). The new Finsweet table plugin seems to do the trick but it only works for static pages.
Is there a way to create dynamic tables (that fit to screen) inside a cms rich text element ?
You could use the FS tooling to create the exact responsive table style & content you want in a static table. Then publish it, grab the HTML, and drop it in an embed in your rich text.
It will pick up all of the styles from the classes that you designed using the FS tool.
If you know Javascript and need something more convenient than that, I’d probably go with that approach but then use markdown tables instead in the CMS content, and write some javascript to convert that to the FS-generated HTML structure.
We recently launched some updates to HTML Tables, which is a table generator that’s made in Webflow. It was specifically designed with the CMS rich-text element in mind. Hope something like this can assist you as well!
I tried inserting this code into a Webflow RichText element (in a CMS Collection template page) and it doesn’t treat it as HTML. Do I need to wrap it in an embed element or something (and if so what does that look like)? Or can I just not really do this inside of a RichText CMS Collection field?