Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 7

How can I add a table?


paul2009

Question

Original post in 2014:

Sometimes you just want one of your contributors to be able to add a table so that they can add some data, like a league table to a page or a post.

Squarespace usually make complex things seem simple (adding images to Galleries for example) but the simple task of adding a table in Squarespace is so challenging!

Yes, I know I can add a code block and add some HTML code to create the table. That's fine for me, but my clients don't want to learn HTML - they just want to edit a table like they would in any other application like MS Word - 'Create Table'.

I'm still hoping Squarespace will address this soon so we don't have to use online HTML table tools.

Update in 2022:

It is now 8 years later (yes that's not a typo... eight years later!! ) and there isn't a built in Squarespace Table Block yet. ☹️

The good news is that Michael (Squarewebsites) built a Table Block plugin that adds a Table Block to Squarespace (both 7.0 and 7.1), allowing you to create and edit tables on the page with ease. You don't need to know any HTML table code, and it can automatically pull your table data from a Google Sheet, making it easier for clients to update their tables using a familiar tool!

table-block-block-ui.thumb.png.11a33c8c46e3e31ade94619dededbdf2.png

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009
Updated for 2022

About Paul: Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving websites by building the features Squarespace didn't include™. See our range of extensions to improve your online store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Recommended Posts

  • 0
On 4/6/2014 at 11:06 AM, paul2009 said:

Original post in 2014:

Sometimes you just want one of your contributors to be able to add a table so that they can add some data, like a league table to a page or a post.

Squarespace makes most complex things seems simple to do (adding images to Galleries for example) but this 'simple' thing seems so challenging!

Yes, I know I can add a code block and add some HTML code to create the table. That's fine for me, but my users just want to do it like they would in any other application like MS Word - 'Create Table'.

I'm still hoping Squarespace will address this soon so we don't have to use online HTML table tools.

Update in 2021:

It's 7 years later (yes seven years!!) and Squarespace never added a Table Block to Squarespace. ☹️

The good news is that Michael built a great product called the 'Custom Table Block' that adds a Table Block to Squarespace, allowing you to create and edit tables on the page with ease. No HTML table code necessary!

table-block-block-ui.thumb.png.11a33c8c46e3e31ade94619dededbdf2.png

It baffles me that I have to pay extra for something as basic as a table... Honestly, if not for the hassle of creating my website all over again, I would have left Squqarspace long ago...

Link to comment
  • 0
On 2/15/2016 at 7:21 AM, paul2009 said:

I tried many suggestions to make tables - this answer details the best way I've found to add tables to Squarespace.

Custom Table Block

[Updated 2019] The best solution I have found for responsive and well designed tables on Squarespace is the Custom Table Block that can be purchased as a plugin. Once added, you can add tables just like other standard Squarespace blocks on any page. If your table contains more than a few rows/columns you can add your data to individual Google Sheets and then link them to a Table Block. It's by far the easiest way to add Tables to Squarespace.

Convert Table to HTML

If the customer already has the table in a Word document, I'll use the excellent free Word to HTML tool by Olly Cope. I paste in the table and it will convert it to HTML.

Create HTML Table

If I don't already have the table I will create it using the excellent HTML table generator at Tables Generator with the CSS option turned off.

Use a Code Block

When the HTML has been generated, I add it to a Code Block on the Squarespace page. I replace the initial

 
 <table>
 

tag with the following:

 
<table class=mytable> 
 

Add some Custom CSS

So that the table is formatted to match the style of the site I then add a few lines of CSS to the Custom CSS page. Something like:

 
.mytable {
 border: 3px solid #5f102b;
 background-color: white;

 th {
   padding: 6px;
   height:40px;
   color: #eeeeee;
   background-color: #5f102b;
   }

 td {
     padding: 6px;
     border:1px solid #f1eaf2;
 }

 tr:nth-child(odd){background-color: #f1eaf2}
}
 

Hi @paul2009

Using Michael's plugin on this site and link to a Google sheet: https://www.dadbudspodcast.com/scores
Do you have any idea how to set a specific width for all columns?

Cheers,

Roland

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
  • 0
52 minutes ago, creedon said:

If you want them more evenly distributed you could do the following.

.custom-table-block {

  table-layout: fixed;
  
  }

Let us know how it goes.

Thanks, @creedon

That worked... what determines the width of the columns? Just curious... 
The first column is an empty column, is there a way to hide that column?

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
  • 0
14 minutes ago, RolandFuseHub said:

The first column is an empty column, is there a way to hide that column?

You should be able to hide that first column by setting the width like this:

td.s3.table-cell.table-cell-1 {
  width: 0;
}

Widths of columns are generally controlled by setting the width of td or th, although it is slightly different in your case because these are all part of one larger grid.

About Paul: Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving websites by building the features Squarespace didn't include™. See our range of extensions to improve your online store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
56 minutes ago, RolandFuseHub said:

what determines the width of the columns? Just curious...

As paul2009 mentions you can use CSS to set widths. If you don't set anything then it is automagically determined. Apparently there are guidelines for the width determination but it is probably a painful read/research and apparently browser manufacturers take some liberties with the guidelines.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
1 minute ago, creedon said:

As paul2009 mentions you can use CSS to set widths. If you don't set anything then it is automagically determined. Apparently there are guidelines for the width determination but it is probably a painful read/research and apparently browser manufacturers take some liberties with the guidelines.

Hahaha....

Michael Mashay just send me this:

.table-cell-1 {
    width: 0;
    opacity: 0;
}

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...