MarkUp table example

Does anyone have an example of a MarkUp table working with a Template column? I’d love to see code sample for a 3-column table, where each column is justified a different way (left, center, right), and where the entire table spans the entire Tab layout. I can’t seem to force the table to span the entire width of the Layout or force the width of any specific column, so I’m been stymied so far.

Can anyone post a sample that works?

I’ve never been able to get a markdown table to span the entire width. You can set the justification, but it always compresses everything to the left hand side with very small margins between cells. I’ve tried tricking it with extra spaces and anything I can think of. I can get it to push to the right side, but then I risk text wrapping. Unfortunately, because of this, I’m stuck using html tables, although I’m prepared to switch to markdown tables if the html stops working. I would love some sort of table component, or in your case, a markdown table that spans to 100%.

I’ve tried all those things myself. I have not played with html tables. Could you post a simple example of how you’ve done that? I’d like to play with it. Thanks.

1 Like

Does this help? https://www.tablesgenerator.com/markdown_tables

I’ve tried all that … It didn’t help me.

1 Like

Oh ok, let me know if you find anything else

You can use several   in the table headers row to force the width of each column.

If you know how many characters you can write on the full width tab, with calculation you can adjust the width of each column so that the 3 columns will be adjusted to the width tab.

Example, col1=15char, col2=10char, col3=15char :

                                          
item1 : value1
item2 : value2
item3 : value3

BUT there’s no way with markdown table to adjust automatically to the tab width…

The best example I have is in this app: https://vkjff.glideapp.io

It’s an old version of my app and it’s a bit complicated since I build the the tables dynamically. Each row with html tags is created on each lesson in the Lessons sheet. Everything is ultimately put together in the Invoices sheet.

I think the link from @Rosewebstudio would be a great way to formulate the table.

1 Like

Looks good, any chance we can see the sheet?

You can copy the app. The sheet comes along with it. :slight_smile:

1 Like

@Jeff_Hager your project gave me a lot of new ideas to play around with. I didn’t realize you could embed html into the Rich Text fields like that. I’m sure I’m going to figure out how to solve my issues with html tags … so thanks!!!

Of course writing html code flies in the face of the “no-code” movement, but I have a bunch of webhooks and api calls feeding my Google Sheet anyway so my project isn’t exactly no-code to begin with. To me, all this is really “less-code”, especially for front end u/i stuff, which tends to be the most frustration part for data-geeks like me.

1 Like

Just keep in mind that html isn’t recommended by glide and functionality could break at any time. I know some tags do not work. I have some css code that stopped working for me awhile back. Just be prepared if functionally stops working at some point in the future.

You mean something like this
https://yinonraviv.glideapp.io/

1 Like

How did you do the icons as links on the front page, are they tiles?

no, when you use image in markdown you cann relate to alt text and link:

[](“LINK TO USE”)

Thank you for your reply. The image you tried to include won’t load (I’m assuming it’s an image). Willing to try again?

C
an you show me an example of what the Markdown code would look like?

| h1 | h2 | h3 |
|:-:|:-:|:-:|
|[![Glide](https://assets.website-files.com/5c1a86d850589562c952a22b/5c883bda91a98e4ab0ffc14a_logo-glide-color.svg   )](https://www.glideapps.com)|[![Glide.](https://assets.website-files.com/5c1a86d850589562c952a22b/5c883bda91a98e4ab0ffc14a_logo-glide-color.svg )](https://www.glideapps.com)|[![Glide.](https://assets.website-files.com/5c1a86d850589562c952a22b/5c883bda91a98e4ab0ffc14a_logo-glide-color.svg)](https://www.glideapps.com)|

gives :

h1 h2 h3
Glide Glide. Glide.
1 Like