Is there a way to embed a table in a CMS blog post? Here’s what I’m dealing with (scroll down to the list of Luetin and Zexanthin Content of Common Foods) http://www.dietitianmagician.com/blog/better-sight-for-more-gold-medals
Thank you in advance!
Here is my public share link: Webflow - Dietitian Magician
Hi all - Following up to see if there is a way to put a table into a Webflow CMS blog post? I need to include recipes and nutritional information comparisons in posts, and I am not seeing a way to do this.
Again, here is an example on the live site: http://www.dietitianmagician.com/blog/better-sight-for-more-gold-medals
Help??
What you could do, it using pseudo elements custom code and the H6 title.
So in your RT, every time you have tabbed data, you put a H6 before. And the tabbed data in ONE paragraph, with 1 data on each line. (use shift enter to pass to a new line without passing to the next paragraph)
So you’d have:
The H6 title (use it as a title for your table, conveniently)
title of first column
data1
data2
data3
title of 2nd column
data4
data5
data6
Using custom code, and pseudo element, now make a rule that says: the first paragraph after any H6 is style on 2 columns
<style>
h6 + p {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
</style>
Put the code in the <head> section at page or site level.
Now when publishing your tabbed data should look like a table. You can further style it by adding more declaration to the h6 + p style.
Ah of course that works only with a given number of columns. For a 3 col table you can maybe use the H5, etc, etc.
It has limitations but if you can live with it, it kinda solves the issue.
I actually played with the idea a bit.
using the following code
<style>
h6 + p {
margin-right: 20px;
margin-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background-color: rgb(224, 230, 235);
column-count: 2;
column-gap: 1em;
column-rule-color: rgba(0, 0, 0, 0.207843);
column-rule-style: solid;
column-rule-width: 1px;
}
</style>
And by formatting text like this:
http://vincent.polenordstudio.fr/snap/9p651.jpg
I get that result on publish:
Thanks for the tips. I will give them a try! (Sorry for the delay in replying – I got pulled away to other things.)
Guys, can someone help me with a similar problem please? I need tables for my blog posts as well, but regarding styling I need something like this
3 columns, where bold text and regular text columns divided by line and a third column is a text/ link. Is it possible to style like this with a custom code?
Hi pondababa,
To be honest with you, I HATE CODING, and this is why i love Webflow. The result you want to achieve can be easily done using FLEXBOX. I’m becoming familiar with it as well and I did the exercise for you. Hope it will help
another note for you pondababa: the “lines” that you are mentioning, are obtained just with spacing, because the container has a grey background.
This TABLE, when done in Flexbox, it’s much easier to edit and control. You can even insert dynamic content using the CMS.
Hey @Magicopit, thanks for the suggestion, but how do I insert flexbox into a blog post (CMS page)? I believe it’s not currently possible. Each blog post has different tables, same as the author of this thread has.
The only way to implement this I think is to place the data into CMS as a rich text + custom code to style it. But I don’t know how to style it 
I think that the post (CMS side) can contain the single fields (you must define a field for the “title”, in your example “equipment”, and a field for Row1Col1, Row1Col2, Row1Col3. You should repeat this for the maximum number of columns you want to allow.
Then, you just have to modify the Blog Post Template: there you should insert the FLEXBOX container where you like. There is a function that enables to show only filled fields (in this way each table will contain the exact datas and will not show empty fields!
This is my small contribute, but there are much more experienced Webflow users in this forum and I’m sure you’ll get maybe better suggestions.
I got your point, but I believe there is a 30 fields limit in CMS. Having 10 items of equipment where each has 4 rows is already beyond of the max cap.
Does anyone know if it’s possible to connect 3rd party database or google sheets for this purpose?
Yes bondababa, 30 fields maximum or you should upgrade to Hosting Pro to have 60 fields. The positive thing is that you can populate CMS fields from GoogleSheets via Zapier.
