Could anyone help me out:
Im trying to insert the table html into templates, and then using rich text but i think im really lost here.
can anyone upload some pics of how it looks in the ‘data view’ so to make more sense on how to add a tml table to the Tab. thank you.
Can you show us what you have set up so far?
I can add the table from the html site, but i cant seem to format it: borders, background colors etc… also having a hard time defining the column width in % as they change width once i insert data.
Here is an example of how it looks:
and this is the html table:
"
| head1 | head2 | head3 | head4 |
|---|---|---|---|
| cell1_1 | cell2_1 | cell3_1 | cell4_1 |
| cell1_2 | cell2_2 | cell3_2 | cell4_2 |
| cell1_3 | cell2_3 | cell3_3 | cell4_3 |
| cell1_4 | cell2_4 | cell3_4 | cell4_4 |
I was trying to copy this table and format:
That won’t work in new Glide Apps. You need to use inline styling, as per this example 
3 Likes
Thank you, im starting to understand it. Though im trying to use the table generator, when i plug in their version html of the table, nothing shows up. if i do a copy paste of your version and modify it, then i get the result in image. Any generator that could work better with glide?
What does the code look like from the table generator you are currently using?
1 Like
Code:
|
Categoria:
|
Gramos:
|
$ / Kilo:
|
$ / Libra:
|
|
A
|
B
|
C
| D |
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
| A4 | B4 | C4 | D4 |
| A5 | B5 | C5 | D5 |
<table style="width: 100%; table-layout: auto;">
<tbody>
<tr style="height: 40px;">
<td style="padding: 0px; width: 25%; height: 40px;">
<div style="background-color: #c7c7c3; padding: 10px; border-radius: 1px;"><span style="color: #000000;"><strong>Categoria:</strong></span></div>
</td>
<td style="padding: 0px; width: 25%; height: 41px;">
<div style="background-color: #c7c7c3; padding: 10px; border-radius: 1px;"><span style="color: #000000;"><strong>Gramos:</strong></span></div>
</td>
<td style="padding: 0px; width: 25%; height: 41px;">
<div style="background-color: #c7c7c3; padding: 10px; border-radius: 1px;"><span style="color: #000000;"><strong>$ / Kilo:</strong></span></div>
</td>
<td style="padding: 0px; width: 25%; height: 41px;">
<div style="background-color: #c7c7c3; padding: 10px; border-radius: 1px;"><span style="color: #000000;"><strong>$ / Libra:</strong></span></div>
</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 1px; width: 25%; height: 31px;">
<div style="background-color: #fffff9; padding: 10px; border-radius: 10px;"><strong>A</strong></div>
</td>
<td style="padding: 1px; width: 25%; height: 31px;">
<div style="background-color: #fffff9; padding: 10px; border-radius: 1px;"> B</div>
</td>
<td style="width: 25%; height: 31px;">
<div style="background-color: #fffff9; padding: 10px; border-radius: 10px;"> C</div>
<td style="padding: 1px; width: 25%; height: 31px;"> D</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;"> A1</td>
<td style="padding: 5px; width: 25%; height: 31px;"> B1</td>
<td style="padding: 5px; width: 25%; height: 31px;"> C1</td>
<td style="padding: 5px; width: 25%; height: 31px;"> D1</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;"> A2</td>
<td style="padding: 5px; width: 25%; height: 31px;"> B2</td>
<td style="padding: 5px; width: 25%; height: 31px;"> C2</td>
<td style="padding: 5px; width: 25%; height: 31px;"> D2</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;"> A3</td>
<td style="padding: 5px; width: 25%; height: 31px;"> B3</td>
<td style="padding: 5px; width: 25%; height: 31px;"> C3</td>
<td style="padding: 5px; width: 25%; height: 31px;"> D3</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;"> A4</td>
<td style="padding: 5px; width: 25%; height: 31px;"> B4</td>
<td style="padding: 5px; width: 25%; height: 31px;"> C4</td>
<td style="padding: 5px; width: 25%; height: 31px;"> D4</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;"> A5</td>
<td style="padding: 5px; width: 25%; height: 31px;"> B5</td>
<td style="padding: 5px; width: 25%; height: 31px;"> C5</td>
<td style="padding: 5px; width: 25%; height: 31px;"> D5</td>
</tr>
</tbody>
</table>
im using: HTML Div Table Generator | 𝗗𝗜𝗩 𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠
Can you show us an image of the result you see on the Divtable generator?
I mean does that look different from your original Divtable setup?
Yeah that looks much better!
1 Like
Looks and works good. Just not sure that what i did on the google sheet side was the best and most efficient option as im using a column for each data entry of the table. thanks for the help.
maybe i need to figure out how to use the inline list with the template.
You shouldn’t need to do anything at all in the Google Sheet, it should all be done in Glide.
Can you show what you did? Maybe we can help you fix it.
1 Like
Is there any way to instruct glide template to fetch data from teh google sheet from any particular row? I seem to have to put all my data on the first row of the sheet for the table to fill up. This might be a silly question but cant find a way around it. thanks
hehe…
Okay, well you can delete every single one of those columns.
Forget about the Google Sheet, do the following in Glide:
- Create a Template column that defines a single row of your HTML table. ie. a single
<tr><td>....</td></tr>row. Use your data columns as replacement values in the template. - Create a Joined List column that combines the template values from all rows. Be sure to use an empty separator in the Joined List.
- Add one more Template column to define the outer part of the table, eg:
<table>
<tbody>
{your-joined-list-of-rows-goes-here}
</tbody>
</table>
And that’s it. You’re done.