# Css html table -

**URL:** <https://community.glideapps.com/t/css-html-table/36557>\
**Category:** Ask for Help\
**Created:** [January 1, 2022, 10:54am UTC](https://community.glideapps.com/t/css-html-table/36557 "2022-01-01T10:54:45Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 3, 2024, 12:39am UTC](https://community.glideapps.com/t/css-html-table/36557/22 "2024-04-03T00:39:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 3, 2024, 12:41am UTC](https://community.glideapps.com/t/css-html-table/36557/23 "2024-04-03T00:41:38Z")

</div>

Can you show us what you have set up so far?

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 4, 2024, 12:30am UTC](https://community.glideapps.com/t/css-html-table/36557/24 "2024-04-04T00:30:44Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/1/312afde20118797263aff8e1cf564ac961087f93.png)  
and this is the html table:  
"

| head1 | head2 | head3 | head4 |
| --- | --- | --- | --- |
| 
« 1 2 3 4 »
 |
| 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:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f3d76117c2945af61cbbb9431580e3b1291b0ad8.jpeg)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 4, 2024, 3:51am UTC](https://community.glideapps.com/t/css-html-table/36557/25 "2024-04-04T03:51:53Z")

</div>

That won’t work in new Glide Apps. You need to use inline styling, as per this example 👇

> [@Darren\_Murphy](#):
>
> Try this:
> 
> ```auto
> <table style="width:10%; table-layout: auto;">
> <tr>
> <td style="padding:5px;">
> <div style="background-color:#132b26;padding:10px;border-radius:10px;">
> <span style="color:#21c376">
> <b>PSP</b>
> </span>
> </div>
> </td>
> <td style="padding:5px;">
> <div style="background-color:#132b26;padding:10px;border-radius: 10px;">
> <span style="color:#21c376">
> <b>EMT</b>
> </span>
> </div>
> </td>
> </tr>
> <tr>
> <td style="padding:5px;">
> <div style="background-color:#132b26;padding:10px;border-radius: 10px;">
> <span style="color:#21c376">
> <b>AEMT</b>
> </span>
> </div>
> </td>
> <td style="padding:5px;">
> <div style="background-color:#132b26;padding:10px;border-radius: 10px;">
> <span style="color:#21c376">
> <b>Paramedic</b>
> </span>
> </div>
> </td>
> </tr>
> </table>
> 
> ```
> 
> ![CleanShot 2023-06-15 at 00.03.58@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6ccb3556aaca05a17a160986501d1863079e07ad.png)

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 4, 2024, 3:36pm UTC](https://community.glideapps.com/t/css-html-table/36557/26 "2024-04-04T15:36:31Z")

</div>

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?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/92d4c3f96cc79f45d68eeb493eeee51b41817a4b.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [April 4, 2024, 5:44pm UTC](https://community.glideapps.com/t/css-html-table/36557/27 "2024-04-04T17:44:56Z")

</div>

What does the code look like from the table generator you are currently using?

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 4, 2024, 7:38pm UTC](https://community.glideapps.com/t/css-html-table/36557/28 "2024-04-04T19:38:23Z")

</div>

Code:

| 
**Categoria:**
 | 
**Gramos:**
 | 
**$ / Kilo:**
 | 
**$ / Libra:**
 |
| 
**A**
 | 
&nbsp;B
 | 
&nbsp;C
 | &nbsp;D |
| &nbsp;A1 | &nbsp;B1 | &nbsp;C1 | &nbsp;D1 |
| &nbsp;A2 | &nbsp;B2 | &nbsp;C2 | &nbsp;D2 |
| &nbsp;A3 | &nbsp;B3 | &nbsp;C3 | &nbsp;D3 |
| &nbsp;A4 | &nbsp;B4 | &nbsp;C4 | &nbsp;D4 |
| &nbsp;A5 | &nbsp;B5 | &nbsp;C5 | &nbsp;D5 |

```auto
<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;">&nbsp;B</div>
</td>
<td style="width: 25%; height: 31px;">
<div style="background-color: #fffff9; padding: 10px; border-radius: 10px;">&nbsp;C</div>

<td style="padding: 1px; width: 25%; height: 31px;">&nbsp;D</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;A1</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;B1</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;C1</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;D1</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;A2</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;B2</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;C2</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;D2</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;A3</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;B3</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;C3</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;D3</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;A4</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;B4</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;C4</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;D4</td>
</tr>
<tr style="height: 31px;">
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;A5</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;B5</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;C5</td>
<td style="padding: 5px; width: 25%; height: 31px;">&nbsp;D5</td>
</tr>
</tbody>
</table>

```

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 4, 2024, 7:42pm UTC](https://community.glideapps.com/t/css-html-table/36557/29 "2024-04-04T19:42:15Z")

</div>

im using: [HTML Div Table Generator | 𝗗𝗜𝗩 𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠](https://divtable.com/generator/)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 4, 2024, 10:55pm UTC](https://community.glideapps.com/t/css-html-table/36557/30 "2024-04-04T22:55:36Z")

</div>

Can you show us an image of the result you see on the Divtable generator?

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 4, 2024, 11:18pm UTC](https://community.glideapps.com/t/css-html-table/36557/31 "2024-04-04T23:18:49Z")

</div>

Of course,

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/b/eb3573c39cbcb722c293521bcbbcbedfe6701c44.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 4, 2024, 11:28pm UTC](https://community.glideapps.com/t/css-html-table/36557/32 "2024-04-04T23:28:22Z")

</div>

I mean does that look different from your original Divtable setup?

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 5, 2024, 12:13am UTC](https://community.glideapps.com/t/css-html-table/36557/34 "2024-04-05T00:13:15Z")

</div>

Getting there though now how to insert the data with an inline list…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/4/446bead9930cb3e59903f4d4bfa57efaefebce43.png)

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 5, 2024, 1:34am UTC](https://community.glideapps.com/t/css-html-table/36557/35 "2024-04-05T01:34:45Z")

</div>

Seems to look better, though my google sheet is very long lol!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/e/2e006dace5ba2c4debf19d0405c904bab8e662f8.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 5, 2024, 11:30pm UTC](https://community.glideapps.com/t/css-html-table/36557/36 "2024-04-05T23:30:32Z")

</div>

Yeah that looks much better!

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 6, 2024, 3:02am UTC](https://community.glideapps.com/t/css-html-table/36557/37 "2024-04-06T03:02:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 6, 2024, 3:03am UTC](https://community.glideapps.com/t/css-html-table/36557/38 "2024-04-06T03:03:24Z")

</div>

maybe i need to figure out how to use the inline list with the template.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 6, 2024, 3:38am UTC](https://community.glideapps.com/t/css-html-table/36557/39 "2024-04-06T03:38:06Z")

</div>

> [@E\_J\_E](#):
>
> 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

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.

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 7, 2024, 1:35am UTC](https://community.glideapps.com/t/css-html-table/36557/40 "2024-04-07T01:35:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![E\_J\_E](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/e_j_e/32/29498_2.png) [@E\_J\_E](https://community.glideapps.com/u/E_J_E)\
**Post date:** [April 7, 2024, 1:37am UTC](https://community.glideapps.com/t/css-html-table/36557/41 "2024-04-07T01:37:25Z")

</div>

Here is how my google sheet looks: the data im using in the template starts from H1…

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/0/f0a2176f1bd4ea3302126ec74925d1d0a6abecc6.jpeg)

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [April 7, 2024, 3:54am UTC](https://community.glideapps.com/t/css-html-table/36557/42 "2024-04-07T03:54:58Z")

</div>

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:

```auto
<table>
  <tbody>
    {your-joined-list-of-rows-goes-here}
  </tbody>
</table>

```

And that’s it. You’re done.

[Previous page](https://community.glideapps.com/t/css-html-table/36557.md?page=1)

[Next page](https://community.glideapps.com/t/css-html-table/36557.md?page=3)
