Right. Now try to do this: the background color on my site is white. I want multiple tables using the following style: header across the entire width, light blue background, black text. Table cells with light grey background, dark grey text and wite borders around the cells. Something you’d design very quickly in html. Without any kind of table widget in Sparkle, I need to draw a colored box for the header, place a text block on top of it. For each cell I need to draw a colored box and place a text block on it. I then need to arrange all the boxes and text cells very precisely to get a spacing of, say 5 px between them. I went nuts after the header and the first two cells.
Sparkle is all about doing things for the user and hide the nitty-gritty stuff from the user to make web design easy. In that perspective, I cannot for the life of me understand why there is still no table widget to take away all the hassle I am now faced with. This has been requested for over two years now. On many web sites, tables are a fundamental layout tool for listing prices, product specifications and whatnot. Come on Sparkle developers: we need that widget now! Its essential! Or must I really go back to using Deamweaver?
Ha, I found a way to add a table. Create the table in its own html file (yes, manual code the table and styles), add styles as you like and upload the file to your site. Then, on the Sparkle page where you want to insert that table, add an Embed element, drag it to the desired size and enter the url to your table html file into the embedded content box of the Embed element. Works perfectly. At first I copy/pasted the entire table code into the Embed element but that gets messed up completely. Just the url to that file on your server does the trick.
I visited the website mentioned, created a table and copied both the HTML and CSS to an Embed widget in my Sparkle (Desktop) page. It looked perfect.
I then checked it on my Mobile page, and of course, the text was too big (still at Desktop size) so I found the Font Size part of the CSS code and changed it to something smaller, to match my Mobile page text. I then changed the Show On This Device for both Desktop and Mobile so that only the correct item would show on each device. Within Sparkle, these two pages looked just right.
However, when previewing in a browser, the Desktop looked fine but the Mobile version
was still showing the larger Desktop text. Despite refreshing my browser and restarting my device, it was still the same. I set about doing the same with other device widths, but each page version previewed with the Desktop size text, not the Font Size I’d set for that particular page size.
Is there something else, apart from Font Size within the CSS that needs to be changed? Does the page need to be published in order to see the changes? Where am I going wrong?
In the CSS have you tried using !important behind the “px” size? This will override Sitely’s font CSS for mobile. So it would look like… font-size: 15px!important;
Thanks for the suggestion.
I had deleted the original table, but following the suggestion above, decided to re-create it.
I’ve added ! important after font-size: - like your example - to each device, but now when previewed, each device width has the table text showing at the smallest, mobile size. There is no change of text size with a browser window at differing widths.
Now, I did change a small part of the html text for one table cell (it was quite long, so shortened it) in the mobile version. That change shows when the browser window is at its narrowest and changes back to the original text as the browser window is widened. So, the html changes based on browser or device width, but the CSS is not changing.
And here’s another thing: I’ve just changed the text colour code on the mobile version only. The colour change shows ok in preview, but it also shows the colour change in all the other device widths too, despite the original colour remaining on the Sparkle canvas at each device width!
It would seem that any change to CSS code on one device is also being copied across to all the others - or am I still doing something wrong?
This is where things go a stray…
Sitely fully generates its own CSS on Publish(ing) which is always spot on.
Your embedded code with its own CSS is now directly competing with Sitely’s generated CSS on the published server. Sitely (in a round about way) also generates CSS per device so there is a lot of moving parts here.
The suggestions I can make here (and they are not exhaustive) are…
- Embed your table as per device hiding it on the other devices
- Tweak CSS per device, in this case mobile. This is where you will need to delve into the Sitely code in Preview to see what your tablet font size is doing to make sure you have the right CSS with “!important” incorporated
- Also try to place another embed widget and place the font CSS in between
<style>...</style>and see if that works. This will set the CSS for the mobile page you have your table in
The other way is to not have your font-size as “px” and try the as “em” in your table code and see if that helps
The following may be of further help…
- How To Create A Responsive Table (a nifty CSS trick)
- https://blueprintdigital.com/blog/font-sizes-in-responsive-design/ (scalable font size)
- Responsive Table Generator Tool | IANR Media | Nebraska (have a play)
In the end it just gets messy which is where Sitely excels… get rid of the messy! 
My suggestion would be to manually build out your table in desktop and hide it on mobile. Then manually build out your table on mobile and hide it on desktop. That’s my best advice.
Thanks again for your input.
Taking your three latest suggestions:
The table is resized with different font sizes for each device and shows only on one device per size and settings
I’ve checked Sitely’s code in preview and nothing obvious jumps out at me - I don’t want to mess with too much there for fear of wrecking the rest of the site
I’ve added just the font CSS to another embed widget on each device size, but there’s no change - in a browser preview, the same size table text appears at each breakpoint.
I don’t have the time to commit to this, it’s for our village site - the table is a What’s On listing comprising 3 columns and 14 rows which will change on a monthly basis - and I’m spending disproportionate amounts of time on something that ought to be quite simple. I think I’ll go back to producing a table in Pages, take a screenshot and add that to the site as an image.
Thanks for your suggestions - maybe they’ll work for someone else.