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

What is the best way to add data tables to a page?

Go to solution Solved by eanderson,


  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

13 answers to this question

Recommended Posts

  • 3

The technology behind LayoutEngine (used for layout on your pages) is made up of Rows and Columns. Conveniently enough, so are tables. So, if you're talking about a simple data table, you could create it using text blocks and not need to code anything.

Now, if you're talking about some huge, complicated table coding it in a Code Block would be better. Either way, it's an idea worth considering.

Template Developer at Squarespace, @esquareda on Twitter.

Link to post
  • 1

I think squarespace is taking this feature seriously and the chart block is a good beginning.There is a good solution available to us in the meantime.

Go to https://google-developers.appspot.com/chart/interactive/docs/gallery/table

Copy the sample code for the table

Go to squarespace website and select 'Embed block'

Paste the code. Change the colors or the sizing if you want.

The sample codes on the google developers website are licensed under the Apache 2.0 license.

Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.

So until we have similar ready-made chart blocks from squarespace, one can modify and use this.Good luck

Link to post
  • 0

It would break by row first, then by column - it all depends on the data being displayed I guess. If it's a basic table of information with headings only on the left, it would still work. Otherwise, yeah - it'd be a problem. On the other hand, what is a huge table coded into a Code Block going to look like on a mobile device? I'd guess unreadable.

Template Developer at Squarespace, @esquareda on Twitter.

Link to post
  • 0

Hi all,

I've generated a 3 column table to compare two products via HTML Tables Generator. 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?


alt text



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