# Table as image URL **URL:** \ **Category:** Ask for Help\ **Created:** [September 20, 2021, 4:58pm UTC](https://community.glideapps.com/t/table-as-image-url/32047 "2021-09-20T16:58:33Z")\ **Posts on this page:** 1\ **Showing post:** 10
**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:** [September 21, 2021, 3:38pm UTC](https://community.glideapps.com/t/table-as-image-url/32047/10 "2021-09-21T15:38:40Z")
Okay, so here is how I would approach it: - Firstly, make an image of a blank table with the correct number of rows and columns, with no data except maybe the column headers, then upload that image to your Cloudinary image library. - Cloudinary will generate a URL for that, which will be something like: ```auto https://res.cloudinary.com//image/upload/table.png ``` - I just quickly created one (using [HTML Table Styler โ–ฆ CSS Generator | ๐——๐—œ๐—ฉ๐—ง๐—”๐—•๐—Ÿ๐—˜.๐—–๐—ข๐— ](https://divtable.com/table-styler/)), and it looks like this: ![Screen Shot 2021-09-21 at 10.54.39 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/c/8c7d021fddd984679b60bf9dbe0651dec6cd7232.png) - The next thing to do is to start adding the text layers. This is a bit fiddly, and you essentially need to add a separate layer for every cell, but it only needs to be done once. - After adding a first row of data to that table, I have a URL that looks like this: ```auto https://res.cloudinary.com//image/upload/ l_text:arial_20:Jan%201,g_west,x_40,y_-10/ l_text:arial_20:11%3A45am,g_west,x_160,y_-10/ l_text:arial_20:Oranges,g_west,x_280,y_-10/ l_text:arial_20:Apples,g_west,x_400,y_-10/ table.png ``` - And that URL returns the following image: ![Screen Shot 2021-09-21 at 11.24.11 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/5/9512947e0173f3d75a89c222ef853605f1d5013b.png) - Rinse, lather repeat until youโ€™ve filled all the cells. The tricky part is positioning the text correctly (thatโ€™s what the `g_west,x_40,y_-10` etc options do). - Once done, youโ€™ll have a URL that you can use in a Glide template column, and then use replacements to dynamically fill the table rows with data. To give you the idea, here is what the URL looks like for one of those tiles that I showed you earlier: ```auto https://res.cloudinary.com//upload/w_300,h_200,b_rgb:A83C31/ l_text:arial_18:Productivity,co_white,g_north,y_10/ l_text:arial_16:Boxes,co_white,g_north,y_50,x_20/ l_text:arial_16:Rate,co_white,g_north,y_50,x_80/ l_text:arial_14:YTD,co_white,g_center,y_-10,x_-100/ l_text:arial_14:{ytd-boxes},co_white,g_center,y_-10,x_10/ l_text:arial_14:{ytd-prod},co_white,g_center,y_-10,x_80/ l_text:arial_14:Last%20Month,co_white,g_center,y_20,x_-100/ l_text:arial_14:{last-month-boxes},co_white,g_center,y_20,x_10/ l_text:arial_14:{last-month-prod},co_white,g_center,y_20,x_80/ l_text:arial_14:This%20Month,co_white,g_center,y_50,x_-100/ l_text:arial_14:{this-month-boxes},co_white,g_center,y_50,x_10/ l_text:arial_14:{this-month-prod},co_white,g_center,y_50,x_80/ l_text:arial_12:Last%20Updated%20{updated},co_white,g_west,y_80,x_15/ Port/blank300x300_r86auo.png ``` And the Glide template column looks like this: ![Screen Shot 2021-09-21 at 11.32.12 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/9/c943e3d267dd71cb1a89f94925356a0b0b943a06.png) - One thing to watch out for is reserved characters, specifically `, / : _` - each of those needs special handling. Refer to [this blog post](https://support.cloudinary.com/hc/en-us/articles/202521512-How-to-add-a-slash-character-or-any-other-special-characters-in-text-overlays-). - And youโ€™ll find the Transformation URL Reference guide [here](https://cloudinary.com/documentation/transformation_reference). Hopefully thatโ€™s enough to get you started ๐Ÿ˜‰ --- _[View the full topic](https://community.glideapps.com/t/table-as-image-url/32047)._