Freeway Data Tables

##A Call for Ideas

I did not mean for this to be so long, but I am asking for ideas.

I was sort of following another thread about styling table elements when I thought that I would refresh myself on how Freeway handles data tables, being this is the age of html5 and semantics, and that I have now spent quite some time writing such tables by hand and then inserting them into Freeway as Markup Items.

I don’t think my standards are onerous-- all that I really require from a data table is that it (1) follow some basic rules for html semantics (yes, data tables are semantic structures) and (2) that they can be styled in the same css ways as the rest of Freeway allows. Unfortunately, Freeway tables still don’t meet these two criteria.

###Table Semantics

Like page sections, html5 data tables can be sectioned as well. You have the <thead> section-- for a row of header cells, the <tbody> section-- for rows of data cells, and the <tfoot> section, for footer content.

The problem begins with Freeway only supporting the tbody section of tables. While you can indicate a row of cells as a “header”, Freeway writes that row of header cells (<th>) into the tbody section, thus failing the basic semantic structure.

All three sections aren’t necessary for every table… but if the user indicates a header row, then that row needs to be in a thead element is all I’m saying. The ability to also designate a tfoot row-- while maybe not an earth-shattering feature-- is also not a step too far in helping users to build rich and meaningful websites.

Another missing obvious semantic element is the table <caption> element. This is useful for a short but descriptive title for the table. Currently, I can insert it as code into the row Markup of the Inspector, but I think Freeway could do a better job of it.

Another very useful semantic table tool is the summary table attribute. Think of it as the alt tag for tables. Currently, it can be manually added via a table’s Extended Style feature.

###Table Styles equals Inline Styles

When you apply any styling to any part of your Freeway data table, the only position Freeway will generate css styles for it are on the inline style attribute… of each and every element. Not that there’s anything invalid about css code in the inline position, but seriously… why would anyone write code that way as a matter of practice? A hundred table cells, each individually coded exactly the same is a crime towards css.

###Flexibility Matters

Then there’s the whole fixed measurement thing… tables and table elements can be described in much the same way we are now describing divs or html elements, yet Freeway is still stuck with fixed non-zero numbers. Coupled with inline styles, and users are stuck with the worst case scenario. No wonder I switched to writing tables by hand. (Not to mention forms).

###Paragraphia, or insanity of the p tag

This is probably one of those topics that will be debated until the end of time, but I am of the opinion that a table cell is no place for a paragraph. If it takes a paragraph to describe the data, then it ceases to be tabular data and the table becomes a layout device.

##What to Do About it?

Okay, I’ve outlined the problem and vented a bit (thank you). Here’s what I tried and the code it produced…

http://cssway.thebigerns.com/workbench/freeway-data-tables/

###Semantic Table Action

This action does a simple but terrific job of creating the thead and tfoot elements when needed, even placing the Freeway row of header cells in the right place. Optionally, it can also remove the auto-paragraph tags from the cell structures. The only thing it doesn’t get right is the position of the tfoot element in the resulting code-- I think the specs have changed on that since Walter made this action. But as long as I don’t need the table footer, everything else works just fine.

###Remove Dimensions Action

Since I had efficient Tag styles set up to handle my table’s appearance, all I needed was a way to remove the “default” inline table cell styles-- cell width, cell height and vertical text alignment. The most successful action for this was the Use External Stylesheet Action, which I already use to establish the reset.css for the page. Ticking the box labeled “Delete Embedded Styles” removed the inline table styles, but also nuked any other styles deliberately left in a valid position. Too heavy handed for me.

So I turned to the Remove Dimensions action, which I’ve used on img elements previously. It was localized to the table styles and worked great, considering it only affects the height and width style properties. The remaining vertical-align style property was removed from the inline position then rewritten to an external sheet, adding an id attribute in its place. So, one gob of code mess gets exchanged for a different gob of code mess, still not an ideal replacement for handwritten tables in my opinion.

But if anyone has a better idea out there, I’d love to hear it. Here’s an example of how I wish the finished code would look–

http://cssway.thebigerns.com/workbench/freeway-data-tables/example.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Ernie,

as ever I can’t basically solve your pain - cause it should be added to the core.

But I’ve got something to re-wire our brains. Unsure if you like it or not:

Got another missing feature called:

####Listing Items

This happens more than often: You’ve got a script, where you need to rebuild a structure like so:

  • ![](upload://5Z23TIunmYHeRhWZdvxZWUfjt6W.jpeg)

    This is our big Tagline!

    Here's our small slogan.
  • ![](upload://7plSvoh8sWUMLD6kJdc3Cwfe58q.jpeg)

    Left Aligned Caption

    Here's our small slogan.
  • ![](upload://mJ9LHafmQvbzgZRK87F7dwP4Epl.jpeg)

    Right Aligned Caption

    Here's our small slogan.
  • ![](upload://gBsz6od1R6mPfGAKi0g48gPm32P.jpeg)

    This is our big Tagline!

    Here's our small slogan.

So using a wrapping DIV and adding markup was one of the solutions doing so, cause listing items is a bit weird - and if unreachable for classifying.

I thought: Sucks! I want to control content native without external management of resources.

So I started to mind. And I thought:

“If Walters’ HTML5 item action can turn DIV into, let’s say a , would it be possible to turn DIV into an

    or >li> as well?”

    And you know what? This slider example is built in Freeway:

    https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/thegrid-slider.html

    and looks like so:

    Now back to you:

    Assumed, you see a table as a “specifically semantic” inflow DIV construction, you perhaps can work with DIVs and apply the semantic simply by action, would this help? It would be outermost cool if you could have a look into it.

    I haven’t published this action right now (cause I’m no action-writer, scared and a bit shy nor am I aware if it does make sense), but if you shoot me a quick not by PM (the one in my profile here preferably) I’ll send it to you.

    I called it Materialize_Elementary (cause I need it for my Materials project) and have already added:

    <i>
    <span>
    <blockquote>
    <caption>
    <caption>
    <ul>
    <ol>
    <li>
    <dl>
    <dt>
    <dd>
    <table>
    <tr>
    <td>
    

    So if you need more on this, I’ll add it on the fly.

    Needless to say, that the turned DIV can be treated including styling as a regular item. You can add classes, remove IDs - theoretically whatever you want. It might be, that the inflow construction takes you slightly longer - but its maintenance should be a walk through the park - perhaps!

    So let me know what you think - and if you think “bullshit”, let me know it anyway.

    Cheers

    Thomas

    All Cudos to:

    Copyright 2012 Walter Lee Davis + Major help from Tim Plumb 2012

    This line is certainly still in!!!


    freewaytalk mailing list
    email@hidden
    Update your subscriptions at:
    https://freewaytalk.softpress.com/person/options

On 2 Dec 2015, at 09:55, The Big Erns wrote:

###Paragraphia, or insanity of the p tag

This is probably one of those topics that will be debated until the end of time, but I am of the opinion that a table cell is no place for a paragraph. If it takes a paragraph to describe the data, then it ceases to be tabular data and the table becomes a layout device.

Would you regard a grid listing people, say on a committee, where a horizontal row of boxes contain a name, a photo, their role, their responsibilities, their phone number and their postal address, one row per person, to be a table or otherwise? (Forget security - it’s restricted). Responsibilities could be multiple paragraphs. To me that’s tabular data.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I think that the issue here is that Freeway always puts a set of

tags in any , whether they are needed or not. It does simplify styling from their point of view, because they don’t have to manage the same style for text as

text

, but it is “noisy” when you only have one string of text in each . If you only got

tags if there was also a “paragraph return” in the td, then it would make more sense and be “lighter”, code-wise, in the HTML.

Walter

On Dec 2, 2015, at 7:56 AM, David Ledger email@hidden wrote:

On 2 Dec 2015, at 09:55, The Big Erns wrote:

###Paragraphia, or insanity of the p tag

This is probably one of those topics that will be debated until the end of time, but I am of the opinion that a table cell is no place for a paragraph. If it takes a paragraph to describe the data, then it ceases to be tabular data and the table becomes a layout device.

Would you regard a grid listing people, say on a committee, where a horizontal row of boxes contain a name, a photo, their role, their responsibilities, their phone number and their postal address, one row per person, to be a table or otherwise? (Forget security - it’s restricted). Responsibilities could be multiple paragraphs. To me that’s tabular data.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

This is a quick test scenario I set up for “Remove Paragraph” in Freeway:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/testings.html

I stumbled upon this earlier, but it might explain the necessity of the p-Tag in Freeway (unexplainable though) in certain situations.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Hi Thomas,
That just looks like a bug in the Action.

When removing the paragraph tags the Action should be placing the content in the same place as the removed p tags. It looks like the code was placing them in the parent item which causes the order to get changed.

Your example should look something like this;
https://dl.dropboxusercontent.com/u/795566/fwa/remove-paragragh-tags/index.html https://dl.dropboxusercontent.com/u/795566/fwa/remove-paragragh-tags/index.html

Here’s a rewritten version of the original Action;
http://www.freewayactions.com/code/?f=remove-paragraph-tags.fwaction http://www.freewayactions.com/code/?f=remove-paragraph-tags.fwaction

I don’t know why I’d written the Action in such an odd way (maybe fwMove didn’t exist in 2004) but this version should be a lot less harsh on the page as it doesn’t use regular expressions to strip out the unwanted tags from the page. The benefit is that it should play a lot nicer with other Actions on the page.

I knew I kept that Action in the beta section of Freeway Actions for a reason! :slight_smile:
Regards,
Tim.

On 2 Dec 2015, at 14:19, Thomas Kimmich email@hidden wrote:

This is a quick test scenario I set up for “Remove Paragraph” in Freeway:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/testings.html https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/testings.html

I stumbled upon this earlier, but it might explain the necessity of the p-Tag in Freeway (unexplainable though) in certain situations.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Excellent Tim. Tried and works so I can remove my example file, however not the link :slight_smile:

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Thomas,

What a laugh for me… at first I thought you were suggesting something like this – http://cssway.thebigerns.com/workbench/freeway-data-tables/semantics.html

Which, I must admit that I am drawn to the idea of lists as natural grouping structures. However, beyond menus and scripting arrays, they are semantically weak for many applications.

But now I see that you meant I should build the content in familiar structures, then using the action to change those structures into whatever semantic tags were necessary. Interesting, since this would happen without Freeway’s interference, so there would be no struggling to overcome its grip of control.

I have seen many applications for such an action, but the effort (I think) is still greater than just writing data tables by hand.

It’s just such a shame since acceptable data tables in Freeway are already so close, and even advanced users would benefit from Freeway’s automated handling of such tedious structures. Walter’s Semantic Table action, if updated with the current tfoot specifications gets most of the work done. Getting the Towers to train Freeway to start writing better selectors and stop forcing inline styles would be the other part of that… but somehow I am not holding my breath for that.

Thanks for sharing, as always.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

But now I see that you meant I should build the content in familiar structures, then using the action to change those structures into whatever semantic tags were necessary. Interesting, since this would happen without Freeway’s interference, so there would be no struggling to overcome its grip of control.

That’s what I meant, indeed (think listed images wrapped by an unordered list - and even classifying them).

I have seen many applications for such an action, but the effort (I think) is still greater than just writing data tables by hand.

Agreed - regarding tables it’s indeed a lil bit weird - especially for content rich ones. On the other hand, keeping a table “flexible by default” is tempting as well. I’m currently trying this out here:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/tables.html

It’s a regular DIV construction turning the DIV Tag into those table semantics (the best I can).

Naturally you forfeit the benefits of working with table (jumping cells by tab …) but you win the independence of doing whatever you want (my preferred way of thinking these days).

It’s just such a shame since acceptable data tables in Freeway are already so close, and even advanced users would benefit from Freeway’s automated handling of such tedious structures. Walter’s Semantic Table action, if updated with the current tfoot specifications gets most of the work done. Getting the Towers to train Freeway to start writing better selectors and stop forcing inline styles would be the other part of that… but somehow I am not holding my breath for that.

Thanks for sharing, as always.

Be sure - it’ll happen. It was anyway my first dive into tables since years. But I will force myself lovin’ them a lil bit more than I did yesterday.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On 2 Dec 2015, at 13:04, Walter Lee Davis wrote:

I think that the issue here is that Freeway always puts a set of

tags in any , whether they are needed or not. It does simplify styling from their point of view, because they don’t have to manage the same style for text as

text

, but it is “noisy” when you only have one string of text in each . If you only got

tags if there was also a “paragraph return” in the td, then it would make more sense and be “lighter”, code-wise, in the HTML.

I was more interested in what Ernie thought such an arrangement of data is, and how it should be thought of and presented in html, rather than the wrong that FW does with it.

David

On Dec 2, 2015, at 7:56 AM, David Ledger email@hidden wrote:
On 2 Dec 2015, at 09:55, The Big Erns wrote:

###Paragraphia, or insanity of the p tag

This is probably one of those topics that will be debated until the end of time, but I am of the opinion that a table cell is no place for a paragraph. If it takes a paragraph to describe the data, then it ceases to be tabular data and the table becomes a layout device.

Would you regard a grid listing people, say on a committee, where a horizontal row of boxes contain a name, a photo, their role, their responsibilities, their phone number and their postal address, one row per person, to be a table or otherwise? (Forget security - it’s restricted). Responsibilities could be multiple paragraphs. To me that’s tabular data.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Ernie I created an action some time back which I never released… but it does produce this out put and you will see the table is striped of all the normal junk and just leaves clean tables structure which can be styled.
Example / snippet of output :

is it something you would be interest in looking at

max


freewaytalk mailing list
email@hidden
Update your subscriptions at:

OrderDate Region Rep Item Units Unit Cost Total
1/6/14 East Jones Pencil 95 1.99 189.05
1/23/14 Central Kivell Binder 50 19.99 999.50

just as a guide i have uploaded the freeway output/ table so you can see it and its construction

This is based off a Freeway template that sets everything to position where I don’t need to do very much in terms of typography so things like resetting h tags setting out tables line heights and the scaling of font sizes along with there line heights and margins and which are all scalable

This uses a number of actions but generally this gives me typography and a table constrcution which i can visually adjust very quickly

http://max-izzat.co.uk/freeway-experiments/TYPO-GUIDES/04.table-guide.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:

is it something you would be interest in looking at

The code looks very nice, Max. I would absolutely be interested in whatever process or tools you used to get to this result.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

David asked…

Would you regard a grid listing people, say on a committee, where a horizontal row of boxes contain a name, a photo, their role, their responsibilities, their phone number and their postal address, one row per person, to be a table or otherwise? (Forget security - it’s restricted). Responsibilities could be multiple paragraphs. To me that’s tabular data.

Tables, like other semantic structures, exist to organize meaning in content beyond the visual presentation of it. For sure, there are gray areas which arise which may not fit neatly into our definition of how information is structured or presented. We should be flexible but also guarded-- else then everything becomes gray as well.

I think that information becomes table-worthy when it can be directly measured against an array of one or more axis of measurement. It’s not enough to infer that relationship visually. This is why I think it’s a good idea not to complicate these structures any more than needed.

So, as exceptions, I would allow whatever elements were necessary. But not before I seriously considered if they were, indeed, necessary.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks to Max, I was able to try a couple of actions that he had made for his own use. His goal being similar to mine, as well as his tolerance for not needing to work strictly visually, I think made for a very good experience.

I’ve updated my workbench file with the results and made them downloadable…

http://cssway.thebigerns.com/workbench/freeway-data-tables/


freewaytalk mailing list
email@hidden
Update your subscriptions at: