Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Styling Markdown Tables in Bubble.io

Learn how to easily style HTML tables in Bubble.io using simple CSS tweaks to enhance the look of your website - all without writing the code yourself.

Adding CSS to Style HTML Tables in Bubble.io

In my last video I demoed how we can take an output from the OpenAI API as Markdown like Markdown table, and we can convert that into HTML and present that on the page. And it looks something like this. We take our output, which is just text, we convert it into an actual HTML table. But wouldn't it be better if it looked like this in this video I'm going to show how we can add some css to our table to improve the looks of it.

Adding the ID Attribute to the HTML Element

So first of all, on the HTML element I have given it an id attribute. If you don't see this id attribute option, you need to go into settings general, scroll the way down to the bottom and then enable it. It's effectively a way of putting a label in the code in order to say for what? For the CSS that you're writing, or even other plugins like the fuzzy search plugin saying target this part of the page, this is where to look. So we're saying this is an HTML block and the id attribute is output.

Applying CSS to the Table

And then on the page I've added a little bit of CSS. Now I didn't actually write this, I just asked chat GPT to write some, some css that improves the look of an unstyled HTML table. But let me just explain what's going on here. First of all, I open up the style tags. Now this is going in the page header just for this page. So if you wanted to display tables and a consistent styling across all of those HTML tables across your site, you could actually do that in settings and put it in the header for every page. But this will only apply to tables on this page and it's only going to apply to tables that have this id attribute.

Adding Styling to the Table Elements

So I'm saying take this id which is output and then style the table, take this id output, style the table stable that style the table header and style the table cells and then header table cells as well. So I'm saying width 100%, border collapse, collapse. These are quite standard ways of getting a table style under control with CSS and then, then applying a border. I'm applying some padding. Padding and borders just make a table look so much better. And then I'm applying a background color to the header row which you can see up here. Yeah, so there you go. That's the really simple css that you can add in order to style tables.

Recapping the CSS Implementation

As a quick recap, I'm not saying style every table, I'm saying only style tables where I've put output as the id attribute and I added this code into the page here and I didn't even write most of the code. I actually got OpenAI check GPT to write it for me and then I added in the id attribute at the start. So any questions or any other uses of markdown you can think of?

Adding CSS for Chat Conversation Repeating Group

Oh, one other thing I forgot to mention. If you're actually going to be running this in like a chat conversation repeating group, then I think you'll need to add this element to every single cell. So you add that to your first cell, just like I'm doing here. So imagine that this group is a cell. In our repeating group. I add it in here and then that way you can refer to the wherever you've saved the output. Like you've created the message data type, you saved the output, that's your raw markdown. And then you add this along with your HTML block in order to convert your raw output from OpenAI, which includes Markdown. Convert into HTML and then convert that HTML, well not convert it, but put it into an HTML block so that it's rendered on the page.

Latest videos

lockcrossmenu