Jump to content

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

Recommended Posts

  • Replies 13
  • Views 48.5k
  • Created
  • Last Reply

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.

Link to comment

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.

Link to comment
  • 4 months later...
  • 1 year later...
  • 4 months later...
  • 4 months later...

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 comment
  • 2 weeks later...
  • 2 years later...
  • 6 months later...

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 comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.