Styling Markdown Tables in Bubble.io

Converting Markdown to HTML Tables

In my last video, I demoed how we can take an output from the OpenAI API as markdown, like a 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.

Bubble Tutorial Resources

But before I launch into it, if you're learning Bubble and you're launching a text startup, then head over to our website, there's a link down in the description, because you can find hundreds of Bubble tutorial videos just like this one. And we've got some amazing, exciting courses on pre-order that cover everything you need in order to launch your startup.

Adding CSS to Style Tables

So, let's go back into the Bubble Editor, and I'm going to highlight the really simple changes that I made in order to style the table in a very beautiful way. 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 all 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 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.

Adding CSS to the Page

And then on the page, I've added a little bit of CSS. Now, I didn't actually write this, I just asked chatgpt to write 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.

Styling Tables with CSS

So, I'm saying take this ID, which is output, and then style the table. Take this ID output, style the table, style the table header, and style the table cells, and then header table cells as well. So, I'm saying with 100%, border collapse, collapse. These are quite standard ways of getting a table style under control with CSS. And 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.

Recap of CSS Styling

Yeah, so there you go. That's the really simple CSS that you can add in order to style tables. 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've added this code into the page here. And I didn't even write most of the code. I actually got openAI, chatgbt, to write it for me. And then I added in the ID attribute at the start.

Using Markdown in Chat Conversations

So any questions or any other uses of Markdown you can think of. 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 and are a 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 it 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.

Conclusion

Any questions, please leave a comment down below.