Adding a simple table to a Rocketspark website can be done within a text block. A table is a great option to use to list different options for your services, for example.
Take a tour - click "Get started"
(To make this tour bigger, click the arrows on the right or zoom in)
How to add a Rocketspark table
How to edit the table
How to add content to the table
Alternative methods for having a table on your website
How to add a Table
- First, add a new stack to the desired page
- Within this stack, add a new block for where you would like the table to display
- Choose a text block
A text block will appear for you to add the table
- You can add a heading to display above the table - alternatively, leave this blank
- Then click on 'Enter your text content' and click on the table icon.
-
Further, click "Inset Table"
How to edit the table
With the text block added and an instered table, you will now see all of the table editor options when you select the table icon in the text options.
You will be able to add/remove columns and rows to the table within these settings.
- Columns: Click Insert column (left or right) or delete on the selected column.
- Rows: Click Insert row (above or below) or delete on the selected row.
You can also add a heading area. A heading area will underline every cell at the top row of your table so it stands out better. To do this, click "Toggle header row"
How to add content to the table
Now it comes down to adding content to your table. Text inside the table can be formatted as normal with bold and italics.
Aligning the text
- Aligning text cells: You can also align each block of text in each cell however you prefer (e.g. centred or aligned to left).
- To align cells, highlight the text you want to align, and then click the Alignment tool to choose which position you want it in.
- Don’t worry if the cells dramatically jump to different shapes and sizes, it will be evenly spread out once content is added to each cell.
Editing the font styling
To edit font styles and sizes, this must be done in your Edit Design tab (either as part of Stack-specific design, or Site-wide design).
You can further add customisation with the width and spacing, plus more through these settings.
Can I add borders and images to my tables?
With the table feature, it is not possible to add cell borders to each section. Images can be added inside the cells however this is for experts only as it requires HTML and CSS knowledge.
However, if you wish to add more separation within the table, you can add horizontal lines between rows. To do this, add a new row and click the 'space bar' twice.
Different methods for having a table on your website
Picture table method
An alternative method to adding a table to your website is to design it in a graphics programme or word processing programme, take a screenshot of it, and then upload it to your site as an image. This should take less time and it should be easier to make the table look exactly how you want it. So that this will look sharp on high-definition retina screens, we recommend enlarging the table to double size and taking the screenshot, then it will automatically resize down when you upload it.
There are a couple of disadvantages to this approach:
- Text that is embedded inside a picture will never look as sharp as text that is displayed as text.
- Search engines like Google won't be able to read the contents of your table, so you won’t get any search engine ranking benefits from the text content inside the table.
- Visitors to your site can’t interact with it as well, meaning they can’t copy the text from a particular cell(s).
PDF download method
Another approach for large, detailed tables is to upload the file as a PDF using the File Upload block, so your visitors can download it to their computers.
Use a table Widget
If you were wanting more flexibility, you could look at using a plugin such as this Pricing Table plugin from Elfsight.
Accordion Block
You could look at adding an accordion block which is an available feature on Rocketspark. While this is not a table, but rather a dropdown, you may find it beneficial for a user-friendly experience.
Please reach out to support@rocketspark.com if you have any questions.