How can I add a table?

Wow, it's 2020 now and I see it isn't yet possible to create a table in Squarespace! if clients have to learn html to add a simple html table then why use Squarespace? unless I'm mistaken and just can't find the table block? 

2021 still no tables. Just an simple one, like the add table in MS Word would be helpful first step.

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!

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...

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

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.

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?

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.

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.

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;
}