Jump to content

How can I add a table?

Go to solution Solved by paul2009,

Recommended Posts

  • 1 year later...
  • 10 months later...
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
  • 2 months later...
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
1 hour ago, RolandFuseHub said:

Do you have any idea how to set a specific width for all columns?

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

.custom-table-block {

  table-layout: fixed;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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
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 me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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
  • 1 year later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.