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

Is there an easy way to add data tables to a page, or do you have to code them up in HTML?

Thanks

Sadly not, its html only

I am sure this is one of those things that once the "Custom Block Development" is opened up someone will add a "Block" that can do Tables but hopefully cooler than a traditional HTML table.

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.

There are a lot of generators out there that can create HTML tables for you. Here is one that was recommended by Lifehacker a long time ago.

http://www.askthecssguy.com/kotatsu/index.html

What about the layout engine rules though (for responsive mobile sites). What layout rules would you need to follow to stop the responsive view breaking up the "table"?

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.

http://www.textfixer.com/html/html-table-generator.php is pretty awesome and works perfectly with Squarespace 6 and its responsive design.

It is possible to create responsive table for mobile (the columns would scroll )

The problem with generators is every time you need to update your table you're back to square one. They're okish for static tables but not for ones that need updating

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

This is what I did http://www.prostheticslab.com/blog/2015/10/1/placing-a-searchable-table-on-a-squarespace-website with the results here http://www.prostheticslab.com/index

Hey, I recommend you to create an online table and copy paste the html code to the web. I'd like to propose atool called RowShare, that allows an automatic update. I explained about this in an article that I wrote. Please feel free to take a look at it: https://www.rowshare.com/blog/en/2017/10/10/How-to-Embed-Tables-in-Your-WebsiteCheers!

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?

Thanks!