Creating a table

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:

1. Open the page or post editor.
2. In the editor, click to move the cursor where you want your table to appear.
3. Click the gear icon to create a code snippet.
4. 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>

5. 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.

For more help formatting tables in HTML, visit w3chools. For an example of a table with CSS, visit our Squarespace 5 code example site.

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:

1. Open the page or post editor and create a table with the steps above.
2. 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.

4. Click Save & Close.
5. The code snippet appears as a gear icon. Click Save & Close to close the page or post editor.
6. Open the page or post editor again. The code snippet now appears as a table.

 

7. Highlight the text in a cell and delete it.
8. Click the insert image icon and add an image from your computer or file storage.
9. 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.

10. Click Save & Close.

Repeat steps 7-10 for the other cells in your table.