How to Add Squarespace Tables in 3 Simple Steps (2024 Guide)

Are you looking for a Squarespace table generator or a simple way to add one to your site?

My clients often request this feature, so it’s not surprising that you, too, want to know. Although Squarespace doesn’t have a built-in table feature, you can make it happen yourself with some custom HTML code.

As intimidating as that might sound, don’t worry; the process of adding Squarespace tables isn’t complex as long as you follow proper guidance. In this guide, I’ll explain the necessary steps of how to add Squarespace tables.

And if you need a Squarespace website designer to help you save time, you can get in touch with me by filling out this form.

How to Add Squarespace Tables: A 3-Step Guide

Outlined below are the necessary steps to creating tables on Squarespace:

1. Create a table header with HTML code.

2. Add table rows and content.

3. Finalise your table with CSS styling.

If this isn’t for you, then you can check out tools such as an HTML table generator.

Step #1: Create a table header with HTML code.

The first step in adding a table to your Squarespace website is to set up the table header. You can do this by writing some HTML code for your table. The HTML code will structure your tables, so it’s essential to ensure it’s done correctly.

You’ll want to set the header tag into a table element as follow:

<table>

  <thead> 

  </thead>

</table>

Next, in between the <thead> tags, you can add your header content. You should note how many columns your table will need — this will determine how many headers you’ll add.

For example, let’s say I’m creating a table outlining various student data in a classroom. To do this, I’ll need four table columns to contain “Index,” “Names,” “Age,” and “Score.”

The index row won’t contain any header content since I’ll be adding numbers to that row, and it’s self-explanatory.

I’ll also need to wrap my table head data tags <th> in a table row tag <tr> to instruct the browser to align my header content in a row, as shown below:

<table>

   <thead>

    <tr>

      <th></th>

      <th>Names</th>

      <th>Age</th>

      <th>Score</th>

    </tr>

   </thead>

</table>

Once you’ve written your HTML code for the table header, you’ll need to add it to your Squarespace page using a “Code” block.

While editing your Squarespace page, tap “+ADD BLOCK” and search for “Code.” Tap it to edit, and paste your table code into it. If you save your changes, you’ll see that you now have a table element on your page, as shown below.

Step #2: Add table rows and content.

Now that you have your table header, it’s time to introduce some rows to hold your table contents.

I’ll add my table contents in a table body <tbody> tag. You can add as many table row <tr> tags into the <tbody>, and your table rows should reflect how many lines or rows of content you want to add.

For this tutorial, I’ll be adding the data of five students to my table, so my table rows will go into <tbody> as follows:

<table>

   <thead>

    <tr>

      <th></th>

      <th>Names</th>

      <th>Age</th>

      <th>Score</th>

    </tr>

   </thead>

   <tbody>

     <tr></tr>

     <tr></tr>

     <tr></tr>

     <tr></tr>

     <tr></tr>

   </tbody>

</table>

The next thing I’ll do is add table data <td> to the rows. Remember, I have four columns in the header section, so each table row will contain four pieces of data, as shown below. You must also add your content between the <td> tags.

<table>

   <thead>

    <tr>

      <th></th>

      <th>Names</th>

      <th>Age</th>

      <th>Score</th>

    </tr>

   </thead>

   <tbody>

     <tr>

       <td>1</td>

       <td>John</td>

       <td>35</td>

       <td>78</td>

     </tr>

     <tr>

       <td>2</td>

       <td>Doe</td>

       <td>34</td>

       <td>60</td>

     </tr>

     <tr>

       <td>3</td>

       <td>Alpha</td>

       <td>37</td>

       <td>80</td>

     </tr>

     <tr>

       <td>4</td>

       <td>Beta</td>

       <td>29</td>

       <td>55</td>

     </tr>

     <tr>

       <td>5</td>

       <td>Gecko</td>

       <td>40</td>

       <td>90</td>

     </tr>

   </tbody>

</table>

If you save your code block, you’ll notice you have a basic HTML table, as shown below:

                                                                                                                                                                                                                                                                                 

	Names	Age	Score
1	John	35	78
2	Doe	34	60
3	Alpha	37	80
4	Beta	29	55
5	Gecko	40	90

Note: Ensure you format the table structures correctly so that search engines can understand them, which can improve your SERP ranking. This free new SEO plugin for Squarespace can further aid your website visibility.

Step #3: Finalise your table with CSS styling.

The last step to add tables to Squarespace sites is to round off with CSS styling. This is important for ensuring the table looks appealing and follows your site’s look.

First, identify the ID or class of the table you want to style. You can do this by using this Squarespace ID finder.

Tip: This guide explains how to find a block ID on Squarespace.

Navigate to the “Design” panel in the Squarespace editor and click “Custom CSS.”

Tip: You can check this guide on custom CSS on how to navigate to this section.

Write your CSS code to target the table elements we discussed earlier. For example, if the table has an ID of ‘#my-table,” you could use the following CSS code to change the styles:

#my-table {

  border-collapse: collapse;

  width: 100%;

}

#my-table th, #my-table td {

  padding: 8px;

  text-align: left; 

  border-bottom: 1px solid #ddd;

}

#my-table th {

  background-color: #f2f2f2; 

} 

If you want the styles to apply to all table elements, simply reference each element directly, as done below:

table {

      border-collapse: collapse

 }  

th {

  font-size: 16px;

}

And here’s how my table looks now. Much more visually appealing, right?

That’s it! You can now create tables on Squarespace with HTML and CSS styling!

Frequently Asked Questions on Squarespace Tables

Can you add tables in Squarespace?

Yes, you can add tables in Squarespace using the “Code” block. This lets you easily create and format tables with HTML and CSS codes.

What is the best way to add a table to Squarespace?

The best way to add a table to Squarespace is to use a “Code” block and build the table using HTML. This allows for greater control over the table’s structure and design.

Wrapping It Up

As you can see, learning how to add tables into Squarespace is relatively straightforward once you get the hang of it. The result is a tabular information block that looks professional and is easily readable. And once you understand the basics of Squarespace tables, you can further customise them with colours, fonts, font sizes, and more, adding a nice touch to your website as a whole.

However, if you find the process too technical, a Squarespace website designer can offer tons of benefits in this regard. My name is Sam, and I’m a seasoned designer who has worked with multi-million dollar companies, as my Squarespace website design portfolio testifies. You can book a call with me to get started.

📩 Join the inner circle to get exclusive code updates

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?