Adding a simple table to a Rocketspark website can be done within a text block.
- First, create a text block and click on the Table tool. You’ll want to begin by clicking Insert Table.
- This will create a table with a 3 by 3 layout. You can edit your row and column layout by clicking again on the table icon and selecting from the options available.
- 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 on any cell of your table, then go back to the table tool and click Add Head.
- Now it comes down to adding content into your table, 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. Text inside the table can be formatted as normal with bold and italics. You can also add a Block Title to display above the entire table. 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).
- Aligning text cells: You can also align each block of text in each cell however you prefer (e.g. centred or aligned to left). Keep in mind, text in the Head section often doesn’t display the same way it appears in the ‘Edit Text Block’ window, so make sure you specifically format it to be centre aligned if that is what you want.
To align cells, highlight the text you want to align, and then click the Alignment tool to choose which position you want it in.
How this all looks:
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.
Picture table method
An alternative method to adding a table into your website is to design it in a graphics programme or word processing programme, take a screenshot of it, and then upload it into 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 of 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 computer.
If you were wanting more flexibility, you could look at using a plugin such as this Pricing Table plugin from Elfsight.