Tables are for sure a very important piece of need - various options!
I was one of those crying for a solution a while ago…
Online tables never did it! But thanks for all at that time giving hints.
All is possible now with rows and colums in blocs.
And yes, it needs some fustidious work
A side effect is - You learn a lot about the resonsive system and the use of classes
Mine is for a while visible on this test page: https://www.bluecruise.org/Test/
NO EXTRA CODE
Rapid weaver has a add-on called Stacks. When you buy stacks you can buy other stacks to use. And one is a spreadsheet stack that you can add a Excel spreadsheet or a numbers spreadsheet. I prefer Blocs because of the ease of use. Adding a tables bric would be all I need to make Blocs my preferred web design software.
Here is the Table Example.bloc.zip (90.2 KB) I created by hand using rows, columns, classes, cunning, pain and suffering.
That table looks pleasing to my eyes across all breakpoints. Note the Classes I use and see how I selectively allowed certain columns in smaller breakpoints to be hidden due to insufficient room. “Hiding content” is the big sacrifice you must make for large and detailed tables like this. I also used alternate row colors to make content easier to see. That is critically important on large tables and is common practice.
As you can see, adjusting that example table for your needs can in some ways be as time consuming as rebuilding it from the ground up. But at least my example gives you a design guide you can use in Blocs 4.
Also note that I created vertical dividers in the table header which vary across breakpoints because I have to hide content at smaller breakpoints. Getting those classes to work across all breakpoints was fiddly to say the least.
I still think there ought to be a tool to make this happen in a much easier manner.
I also think there ought to be special features like a table that can be made to selectively hide content (in order to fit the table on a small display), but when an easy-to-spot button or trigger on the table is clicked, the hidden content should fold out and over existing content. Not sure how that trickery would be implemented in Blocs, but my desire would be to give access to the full table content even on an iPhone, where all content of a large table cannot be displayed all at once (not at reasonable font sizes).
I never could conceptualize how to do a “fold-out table” on my own (for the iPhone breakpoint), hence the example document I provide above permanently hides certain table content in the smaller breakpoints, with no option to display it. I do provide a notice that displays above the table on an iPhone that explains content is missing. In other places in my websites, that notice will link to a PDF of the full table. But again, a fully responsive table that can selectively hide and show content would be idea for iPhone. I suppose it even could be used on the LG breakpoint for truly massive tables.
I hope this helps. It’s all we have for now. If we could get a few hundred Blocs users to support a table creation tool, it might happen someday. Demand is everything. And no matter how loud my one voice is, it is but one voice in a massive sea of “I don’t need that!” opinions.
While there is currently no option natively built into Blocs at the moment, you could either make the HTML markup in a code widget, or you can make a table using Divs, it will be responsive, you can have it scroll horizontally on very small screens. Best of all you don’t spend forever playing with columns per breakpoint.
Here is a very simple example, that uses only 4 classes! and Divs. Add a few more to style it up better. I will make a tutorial on how to build this.
This approach also allows you to do things, like alternative background colours dynamically on the rows too.
Awesome @PeteSharp!
A second option is the use of @Jannis amazing Volt! You will only need to add the HTML <table> tag with a few lines of code to do any fancy styling. You can find it here: HTML Tables. You can even do a “Copy / Paste” directly from an excel sheet into Volt:
The datasheet is fully responsive and is live here.
This is extremely helpful.
I don’t have an extensive need for tables, like importing spreadsheets, but this presentation format is essential for the data elements I do want to present on my site, and I think, for all of us, bringing data to websites. There really ought to be a bric.
I await your tutorial; and applaud your effort.
Hi @KBConcepts. Here you go, a fully responsive searchable table in Blocs. With 4 different solutions provided to manage tables, there must be a solution for everyone now.