paul2009 Posted April 6, 2014 Share Posted April 6, 2014 (edited) 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 2024: It is now 10 years later (yes that's not a typo... ten years later!! ⏳) and there isn't a Squarespace Table Block built-in yet. ☹️ The good news is that Michael (Squarewebsites) built a Table Block plugin. (These are affiliate links for products I use and love. If you make a purchase I may receive a tiny commission.) This plugin 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 ⬇️ Edited January 23 by paul2009 Updated for 2024 Krafty, Valpc, dianeeve and 18 others 19 2 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide 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. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
neeklamy Posted April 6, 2014 Share Posted April 6, 2014 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. Link to comment
jgennick Posted April 6, 2014 Share Posted April 6, 2014 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. Link to comment
neeklamy Posted April 6, 2014 Share Posted April 6, 2014 …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. Link to comment
mdr Posted October 20, 2014 Share Posted October 20, 2014 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. Link to comment
Scoobie Posted October 20, 2014 Share Posted October 20, 2014 Looks useful. Could do with a responsive table though to work on mobile (scrolling the table left and right) Link to comment
Guest Posted November 21, 2014 Share Posted November 21, 2014 (edited) 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 November 21, 2014 by Guest Link to comment
Scoobie Posted November 22, 2014 Share Posted November 22, 2014 How well does it work on mobile? Do you have an example you could post a link to your site? Link to comment
Scoobie Posted January 12, 2015 Share Posted January 12, 2015 See the answer I posted in this threadhttp://answers.squarespace.com/questions/766/feature-request-please-can-we-have-tables Link to comment
littleviolette Posted September 18, 2015 Share Posted September 18, 2015 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. Link to comment
Solution paul2009 Posted February 15, 2016 Author Solution Share Posted February 15, 2016 (edited) 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} } Edited May 31, 2022 by paul2009 Added Custom Table Block EarvinChong, designroomcornwall, SofAl and 5 others 5 3 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide 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. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
Scoobie Posted March 4, 2016 Share Posted March 4, 2016 @littleviolette I like your table solution. Can I ask though, where/how do you store input.csv in Squarespace? Link to comment
Scoobie Posted March 8, 2016 Share Posted March 8, 2016 (edited) Here is a new code for a nice looking responsive product comparison table from Codyhouse https://codyhouse.co/gem/products-comparison-table/ Edited March 8, 2016 by scoobie Initial Revision Link to comment
ylz Posted February 13, 2017 Share Posted February 13, 2017 This is an excellent and very helpful answer. I can't understand why it was getting downvoted. Thank you so much. Link to comment
otpotential Posted June 28, 2017 Share Posted June 28, 2017 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 Link to comment
facetcounter Posted August 1, 2017 Share Posted August 1, 2017 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?") Corizona 1 Link to comment
so-in Posted April 6, 2018 Share Posted April 6, 2018 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 Link to comment
Guest Posted April 20, 2018 Share Posted April 20, 2018 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 Link to comment
kelcorbett Posted May 6, 2018 Share Posted May 6, 2018 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! Link to comment
ToWhenTFor Posted July 16, 2018 Share Posted July 16, 2018 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! Link to comment
sashawells Posted October 23, 2018 Share Posted October 23, 2018 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 Link to comment
hmann Posted July 16, 2019 Share Posted July 16, 2019 @Kel were you able to find the solution to this? Link to comment
AskQuesty Posted August 9, 2019 Share Posted August 9, 2019 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 Belizabeth 1 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment