How to Add Tables in Squarespace
Of all the great features Squarespace has, there’s one basic thing they miss: the ability to easily add a table.
We get it Squarespace, tables aren’t pretty, but so many situations call for a boring table!
Maybe Squarespace will add Table as a block type in the future. In the meantime, if you’re trying to create a Squarespace table, here are your 3 options:
Option 1: Add An Image
Best if you don’t want to touch any coding.
Simply create and style a table with your favourite tool, then export it as an image and upload it to Squarespace.
This is a quick and suitable option if you have a simple table.
The drawbacks?
It won’t be responsive.
The table might be readable on desktop devices, but your mobile users will have to zoom in to read it (not a great experience!).
Moreover, if your table is data-rich, you will also lose the SEO benefit (because search engines cannot read texts on your images).
Option 2: Use a Table Generator
Best if you’re comfortable with coding
With some codes, you can add a table in Squarespace and style it to your liking.
Coding a table is not hard, but it’s a bit tedious and easy to mix up between rows and columns.
Word to Clean HTML is a great free tool to convert a table from, as the name indicates, Word to HTML.
Simply paste the table you’ve created in Word into the tool and it will convert to HTML.
First, convert your table from Word to HTML
To customize the design of the table, you will need the CSS Editor in Squarespace.
From the home menu, head to Design > Custom CSS.
Add your codes to the code box.
Here’s a sample of CSS codes you can use to style your tables:
/*table styling*/
table {
overflow: auto; /*allow table to be scrollable*/
background-color: #F3EEE7; /*select background color*/
font-size: 0.8em; /*select font size*/
border: 2px solid #52643A; /*style the outer borders*/
}
td, th {
padding: 10px; /*add spaces around texts*/
border: 1px dashed #52643A; /*style the outer borders*/
}
th {
color: #52643A; /*change font color for the header*/
text-align: left; /*set headers to left alignment*/
}
If you’re a Squarespace designer, you can set the table styling upfront so that your client only needs to work with the HTML code block.
“But I don’t know CSS” option
If you want a tool that generates both HTML and CSS for you, you can use Divtable to create and style a table from scratch.
Build your table in Divtable to get both HTML and CSS that you can then copy into Squarespace
Caution: Code Block on Mobile
If you use AMP (Accelerated Mobile Pages), keep in mind that code blocks will be hidden on the AMP version.
Option 3: Get a Custom Table Block plugin
Best if you use tables frequently
If you want a one-time set-up, no-fuss solution, you can get a third-party plugin to add the table block into Squarespace.
Once set up, the Table Block will be part of the block menu just like a standard image or text block.
You can get Custom Table Block plugin for $45. I haven’t used this myself but it seems to be working well for other users.
The table block will inherit the general styling you have for the website.
You can use the CSS Editor to further customize the look and feel of the table as we talked about in option 2.
And there you have it - 3 ways to add a table in Squarespace!
