How can I add a table?

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

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.

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.

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

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

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.

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

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.

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

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

@AskQuesty Please don’t @ mention users who haven’t taken any action on your posts. It's super spammy