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

How can I add a table?

Question

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.

Edited by Paul2009

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post

Recommended Posts

  • 3

I tried many suggestions to make tables - this answer details the best way I've found 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}
}

Edited by Paul2009
Initial Revision

If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 1

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.

Edited by Bruce Fraser

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

…That’s what Paul said in his question:

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

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.


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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?")

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

alt textalt text

9509-screen-shot-2018-04-23-at-40000-pm.png.f1f9c7bdcb9970293e1efcd5ca26e536.png

9510-screen-shot-2018-04-23-at-40030-pm.png.cf1cd4f1af41891e65978383eb317d78.png

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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


Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Share this post


Link to post
  • 0

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


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...