How can I add a table?

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!

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

Not in Squarespace, you might have to look at some sort of hosted system. How about Google Forms?

The only way that comes to mind at the moment is to drop a Code block onto your page, and then write the table's HTML by hand.

…That’s what Paul said in his question:

I do wonder, depending on what kind of data would be uploaded, whether a series of Google Forms and a bit of embedding would do it. Failing that, it sounds like more of a custom code thing.

This isn't quite as simple as you'd like, but you could have them use the HTML Table Generator. This would allow your users to copy data from a spreadsheet or import CSV data and convert it into HTML.

Looks useful. Could do with a responsive table though to work on mobile (scrolling the table left and right)

That table generator is brilliant!

However, one thing is still lacking in Squarespace: once I’ve copied the table to my website, I want to link various text items in the table to PDF files I’ve uploaded to the site.

Linking from normal text to a file is easy: just click on the link icon in the toolbar. But when the text is in imported HTML, the toolbar does not appear. What happens instead is that the HTML code box pops up. It MIGHT be possible for a coder to add a link there, but that’s not me. Besides, there are dozens of links I want to add, and this would be a very cumbersome process.

How well does it work on mobile? Do you have an example you could post a link to your site?

See the answer I posted in this threadhttp://answers.squarespace.com/questions/766/feature-request-please-can-we-have-tables

I personally use Bootstrap Table because it allows me to sort and paginate when I have a large set of data. It also allows users to scroll left and right as @scoobie has mentioned.

I usually convert my CSV file into a HTML table with Bootstrap configurations with a click of a button using my pre-written python code (http://blog.victoriaxie.com/eng/2015/9/10/a-simple-way-to-convert-csv-data-into-a-sortable-bootstraphtml-table-using-python). For Squarespace user, there is a caveat-- because the Bootstrap CSS may conflict with Squarespace's font, depending on your template, you may need to manually configure the font in the custom CSS window. I took the effort to readjust the font with custom CSS because it is worth the time in the long run as I will have quite a few of large tables, but I understand it is not worth everybody's time.

That's perfect.

@littleviolette I like your table solution. Can I ask though, where/how do you store input.csv in Squarespace?

Here is a new code for a nice looking responsive product comparison table from Codyhouse

https://codyhouse.co/gem/products-comparison-table/

This is an excellent and very helpful answer. I can't understand why it was getting downvoted. Thank you so much.

I did not want to inject code because I did not want to lose the AMP qualification of my blog post!

I ended up needing to re-image my table with rows and only 2 columns. I feel like it looks nice for what it is (both on desktop and on mobile), but I would still love to see further development by Squarespace of a table feature!

My responsive table: https://otpotential.com/blog/virtual-reality-and-occupational-therapy

If you find markdown tables easier to work with, you can add a markdown block to your page (available as a "basic" block) then use markdown table formatting, for example:

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

(the auto formatting of this forum software messes with markdown table syntax above but you get the idea) For more info see:

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables

The table you get may still need some formatting depending on how you want it to look. Markdown generates regular table markup so the styling info from previous posts still applies here (sorry that's kind of an advanced answer to "How do I make it look right?")

Excellent Answer - worked perfectly for me thanks! It would be nice if Squarespace would address this with a multi-column responsive table block and some styling options

This is the perfect answer. And if you want to make the table responsive (left-right scrollable) then do the following. Once you have converted using the free Word to HTML converter, then enclose the tags inside the following divs, as shown below:

<div style="overflow-x:auto;">
 <table>
   ...
 </table>
</div>

Works like a charm. See my website, scroll to the bottom for the comparison table: Best iPhones for Virgin Mobile - ReviewCellular

Hi all

I've generated a 3 column table to compare two products via HTML Tables Generator - as suggested by @mdr . I've then placed this on the site using a code block. I was a little skeptical about using a free tool like this, but its actually looking surprisingly good.

Unfortunately on mobile, part of the right hand column is cut off from view (but you can scroll to the right). Obviously this is not an ideal situation. I have uploaded screenshots of desktop + mobiles views.

I'm using this media query to make the table responsive:

 @media screen and (max-width: 640px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}

That piece of code came from the HTML Table Generator site. I've tried a number of other media query code snippets after sleuthing around online, but none of them are working for me...

Does anyone have any ideas how to get this working properly for mobile devices?

Thanks!

Thank you for this!! I had made the tables in the generator, I had the css the way I wanted it, but the tables were breaking my mobile site because they were too wide. This is the exact tiny bit of code I needed to fix all my problems. Thanks so much for taking the time to write this comment and providing me with the perfect solution!

Here is another table available in html formate

  <TD>Data 1</TD>
 <TD>Data 2</TD>


 <TD>Data 3</TD>
 <TD>Data 4</TD>


 <TD>Data 5</TD>
 <TD>Data 6</TD>

Have a good day. See my website and scrol to the bottome to comapre the table. samsung galaxy j7

@Kel were you able to find the solution to this?

No unfortunately not..

Hi @Paul2009, I made a video tutorial for you on add a table. Hope this helps! https://www.askquesty.com/squarespace-answers/table-add-squarespace-tutorial