How to create a simple grid

I’m hoping to recreate a simple grid, such as the one on https://www.macupdate.com. It’s basically a spreadsheet-style table, with several columns. There will be several pages of info, and it will be updated regularly, not just created once and published.

Any idea how I could do such a thing in Sparkle? I could use something else but I’'d rather keep everything in one tool, if possible. Thanks for any thoughts!

@Gavin, Unless you want to code this into a table by “embedding”, Sparkle has no database-like backend so you would need to manually lay it out and manually maintain.

1 Like

Yes, I understand that. There certainly wouldn’t be huge volumes of data in this, but it would be manually updated fairly regularly. I’m looking for something to layout this out conveniently.

Try to cut and copy from Numbers. It should work…

Hi. Having just switched from Wordpress to Sparkle to make some simple html web sites, I am surprised no simple grid option is available. I need to make a 2 column grid with 10 items (text) and a little shocked a grid function is not available in this product. While using numbers or excel may be ok for some people to copy/paste into sparkle, the result is an image with grid lines which most people will not want.

Are there any plans to implement grid option in future?

We don’t generally discuss future plans, because that creates a tension of the “ok so when will it be available” kind. That’s a question that’s very hard to answer for a small team, so generally it’s best if you evaluate Sparkle on what it can do today.

That said, yes we will be adding a grid. Sparkle is very much a work in progress, and we are adding new features as fast as we can, they’re just spread across a million domains and use cases so sometimes it’s hard to notice.

I think what you’re looking for is a way to create a table. In Sparkle, it’s relatively simple to create a table by using the tools in the interface. Essentially, add a box to create the row and give it a background colour of choice. Then add text boxes on top of the row background and space/align the text items using the sparkle’s alignment aids. Once your first line is created, group everything together then Select the group, hold down the alt key while dragging the group. This duplicates the row. The snapping options in Sparkle will ensure that your rows are perfectly aligned. Just keep duplicating until you have all the rows you need. Group all the rows to make a complete table object that can be moved around the page.
You will then be able to edit the text in each row to whatever you need. Here is a simple one I made in just a few minutes.

Here is the workflow to use:


As an alternative, You could use an online HTML table generator. These allow you to create and style a table through a simple interface such as the one shown below:

Once created, the generator will create a piece of code that you can add to your Sparkle page through the Embed widget. The end result in your page would look like this:

This is a nice option if the information isn’t to be changed too often. If you want to edit the table content often, you would have to either recreate a new table every time and replace the embed code, or you would have to manually edit the text within the code. Personally, if I needed a table that required frequent changes, I would use Sparkle’s tools to build the table.

Hope this helps.

3 Likes