How To: Create A Table In Squarespace

While the superpowers of Squarespace can feel infinite, a handful of their tools require a little extra effort to set up. Tables are one of these things. Tables come in handy when organizing information visually and make it easy for clients and customers to read through information.

For example, we can create a basic table that looks like this: 

Breakfast Lunch Dinner
DAY 1Adaptogen Smoothie BowlWild Caught Fish TacosVeg Noodles with Avocado Pesto
DAY 2Grain Free Matcha WafflesCauliflower Rice Sushi BowlCarrot Gnocchi
DAY 3Sweet Potato Breakfast BowlBroccoli Lemon SoupPork + Beef Hamburgers on Sprouted Sourdough
DAY 4Basic Sprouted Nut + Seed GranolaTurmeric Roasted Cauliflower and Honey Mustard SaladChickpea and Cauliflower Pizza Crust

Or with a few small tweaks, we can update the table to look a little more like our brand. 

Breakfast Lunch Dinner
DAY 1Adaptogen Smoothie BowlWild Caught Fish TacosVeg Noodles with Avocado Pesto
DAY 2Grain Free Matcha WafflesCauliflower Rice Sushi BowlCarrot Gnocchi
DAY 3Sweet Potato Breakfast BowlBroccoli Lemon SoupPork + Beef Hamburgers on Sprouted Sourdough
DAY 4Basic Sprouted Nut + Seed GranolaTurmeric Roasted Cauliflower and Honey Mustard SaladChickpea and Cauliflower Pizza Crust
*Recipe title inspiration from Function of Well

In this post you'll find an easy step-by-step tutorial for how to add a table to your Squarespace site. Lets get started! 


Part 1 - Creating Your TablE

 
EMWORKSHOP_HowToCreateATable_Squarespace.png

Step 1

To get started, click on the link below to visit the Table Styler website. This will make it easy for us to customize the look and feel of our website without needing to worry about writing code. Once you are in the video styler, you'll want to pick out a table template and begin to customize your table to match the look and feel of your website. 

Watch the Video:

 

Part 2 - SET UP YOUR TABLE IN SQUARESPACE

Once you have given your table the look and feel you are going for, you are ready to bring it all into Squarespace.

 
CopyCSSfromtheTableStyler.gif

STEP 2

Copy and Paste the CSS Code from the Table Styler.

CopyCSS.gif

STEP 3

Then go to your Custom CSS Code section in Squarespace and paste. 

CopyHTML_TABLESTYLER.gif

Step 4

Go back to the Table Styler and copy the HTML Code from the left box. 

PasteHTML_Squarespace.gif

STEP 5

Then go to the page on your Squarespace site where you want the table to live. Insert a code block and paste the HTML into the code block. 

 

Watch the Video:

Part 3 - FINAL EDITS

 
FinalEdits.gif

Step 6

Click edit on the code block you pasted from the Table Styler. Then you can go in and modify the black text between the green tags to enter the values you would like to show in the table. 

 

Watch the video:


👏YOU JUST ADDED A TABLE TO YOUR SQUARESPACE SITE! 👏