To create a table in Squarespace 5, add custom HTML code to a page or post.
Note: Adding code to your site is an advanced modification that falls outside of the scope of Squarespace support.
Create a table
To add a table:
- Open the page or post editor.
- In the editor, click to move the cursor where you want your table to appear.
- Click the gear icon to create a code snippet.
- Paste in this HTML code:
<table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>
- Replace the content between the <td></td> tags with the content you want in your cells.
Tip: You may want to bold the text in the top row to create a header.
Using a table to align images
There isn't a built-in way to align images in a grid in Squarespace 5. To create this effect, some customers add their images to a table.
This is an advanced option that can be difficult to achieve. Before you try it, we recommend exploring these options instead:
- Creating a thumbnail image navigation
- Adding a gallery of images
- Adding a slideshow
- Aligning multiple images
You could also consider moving to Squarespace 7, our current platform. In Squarespace 7 there are multiple drag-and-drop options for creating and aligning image layouts, such as the Grid Gallery Block.
Add images to a table
Before adding images to a table in Squarespace 5, we recommend you use a third-party editor to format the images. For best results, we suggest:
- Ensure all your images the same size.
- Add white space around all four sides of the images.
- Ensure all your images are the same shape, as these are easier to align. We recommend squares.
Next, to add these images to a table:
- Open the page or post editor and create a table with the steps above.
- Leave the sample text in the cells as-is.
Tip: If you're comfortable with HTML, you can replace the sample text with image tags and link to the image URL.
- Click Save & Close.
- The code snippet appears as a gear icon. Click Save & Close to close the page or post editor.
- Open the page or post editor again. The code snippet now appears as a table.
- Highlight the text in a cell and delete it.
- Click the insert image icon and add an image from your computer or file storage.
- Use the Resize option to change the image size.
Tip: We don't recommend changing image alignment, as that only aligns images in relation to the text.
- Click Save & Close.
Repeat steps 7-10 for the other cells in your table.