Problems with tables

[Branimir Braykov]

I am to create some tables and I have found the following issues:

• All tables span to the width of the tiddler. I was unable to create slim tables that just fit its contents
• "h" does not create table headings
• "f" does not create a footer row
• Two tables defined and separated by several empty lines are rendered as one combined table. I added explicit <br> to make them split
• "c" for caption after the table doesn't work
• last row of table not rendered if at the end of the tiddler (no new line entered after the last column "|")

[David Johnston]

The table information you are using is for TWC (Tiddlywiki classic) .. I suspect you are using TW5 (Tiddlywiki 5) which is currently in alpha testing and should hopefully soon enter beta testing.

There are differences in the way tables are used between the products.

To address your issues in the order you gave them

1. Use the following to control the table width in TW5

@@width:400px;

|example table | Another cell|

|Next line| Another cell on next line|

@@

2. Headers in tables are made with an ! (exclamation mark) preceding the text in TW5

|!Header|!2nd header|

|Content 1| Content 2|

A following h still works, however there is no style in the CSS that shows it is a header .. so it won't stand out much. You would need to assign a style to <thead>

3. A following f still works for footer , however again there is no style in the CSS that shows it is a footer.. so it won't stand out much. You would need to assign a style to <tfoot>

4, You need to have at least two lines between them to work, as the rendering engine for TW5 creates a "block mode" render of the html with two following lines.

5. C for caption does work and generates <caption> however once again no style is defined to show the difference.

6. Same answer as 4, the table end needs two blank lines following to render in "block mode".

Hopefully that helps

David

[Branimir Braykov]

Hi, thanks for your quick reply, I hope you are one of the developers, as I know TW5 is in "testing" mode and that's why I post here, as I am testing it.

Sorry I didn't tag my post with TW5, I just forgot, but after I posted I couldn't see my post (until it was approved, whatever).

I am going to reply to your points not because they don't help me do the job, but exactly because I am testing TW5 and I expect backwards compatibility with TW2 or at least to note to developers to address the issues I point out here.

So

1. Your suggestion works. However I would expect it to behave like it is in TW2, eventually. Furthermore I look at W3 HTML Table element definition and it says: The width attribute specifies the width of a table. If the width attribute is not set, a table takes up the space it needs to display the table data.
2. I like the new "headers" in tables with "!". It sure makes sense. I think it should be added to "Reference" section in TW5. Also currently it just makes the text bold. Its CSS should be also modifying the background in some way, as it is making it orange in TW2.
3. Fine, as long as it will be added later for the beta version
4. Wrong - I added 10 lines and still I got the same result. I think it is a bug.
5. I was not explicit here. "c" for caption after the table does create a caption but it is still above the table. So I think it is more than just a CSS missing
6. Again wrong as in point 4 - it just needs a single new line. But it is at the END of the tiddler, it shouldn't.

[David Johnston]

Hi Branimir,

I am not a developer, like yourself I am a user .. so please see my response as merely trying to help you overcome your problems rather than fix them! I am merely trying my best to help you :)

1. I suspect the choice of 100% wide tables is part of the css, it can be over come with returning the tables to default HTML behaviour: -

@@width: auto;

"insert table here"

@@

2. I agree, I suspect we will see more documentation as TW5 moves from alpha into beta and then finally into release. However I believe the stated aim is not to reproduce TWC behaviour in all respects, as the output from TWC at an HTML level does not produce well structured HTML. In addition as CSS is "user driven" rather than developer driven, making things "look" the way you want them is your choice :)

3. Once again CSS is your friend ... you can make the footer look how you wish.

4. Yes, I suspect it is a bug, the one or two lines triggers block mode. However it should not "consume" all the lines. As you commented a <br> will fix it for the moment.

5. In your own words .. Wrong ... use this to place the caption where you wish: -

@@caption-side:bottom;

"insert table here"

@@

According to the w3c the placement of a caption is by default as a title. http://www.w3.org/wiki/HTML/Elements/caption ... but it can be placed anywhere using css.

6. I merely supplied an example of how to resolve the issue .. once again the rendering needs to be forced into block mode which requires one or two lines added after, this behaviour is different from TWC.

I spent some time this morning coming up with some CSS which will make tables "look" like the TWC version as a gift for you I hope it helps :)

Firstly create a new tiddler and tag it with $:/tags/stylesheet which will force it to be used as a stylesheet then add the following.

.oldstyle td {

border: 1px solid #666;

}

.oldstyle thead tr td {

background: #db4;

color: #fff;

border: 1px solid #666;

}

table.oldstyle {

width: auto;

caption-side: bottom;

border: 2px solid #666;

}

------------

To make it work with a table merely do the following: -

@@.oldstyle

(put your table here)

@@

This should if done correctly render using css a table in the old TWC style. It relies on you using a recent version of TW5.

E&OE

[Tobias Beer]

Hi David & Branimir,

1. I suspect the choice of 100% wide tables is part of the css, it can be over come with returning the tables to default HTML behaviour

 

@@width: auto;

"insert table here"

@@

...which should be the default along with max-width:100%; — tables must not stretch beyond tiddlers.

 

2. I agree, I suspect we will see more documentation as TW5 moves from alpha into beta and then finally into release. However I believe the stated aim is not to reproduce TWC behaviour in all respects, as the output from TWC at an HTML level does not produce well structured HTML. In addition as CSS is "user driven" rather than developer driven, making things "look" the way you want them is your choice :)

I also vote for this approach, however this begs for a space that gives clear instructions and examples for "How do I do this?"

In the case of captions, the answer is to use:

table caption{

    caption-side: bottom;

}

I don't think *at all* that the answer is "use inline styles", e.g.

@@caption-side:bottom;

|the|table|

@@

In general, I think captions below an element are the meaningful default, especially when your wiki syntax already puts it last.

3. Once again CSS is your friend ... you can make the footer look how you wish.

Dito. If people are not supposed to go crazy over having to style everything themselves there need to be style-bundles of sorts which come with balanced defaults rather than a blank canvas. I think, the theme is only place to contain such a style-bundle.

4. Yes, I suspect it is a bug, the one or two lines triggers block mode. However it should not "consume" all the lines. As you commented a <br> will fix it for the moment.

Not sure how this applies to tables, to me it's pretty obvious that table syntax always renders block mode. In which occasion are they not supposed to?

5. In your own words .. Wrong ... use this to place the caption where you wish: -

@@caption-side:bottom;

"insert table here"

@@

I find it tremendously helpful that you share your knowledge about how to achieve the desired end, but I think this thread is mostly about defaults... and not defining a custom StyleSheet or even having to use inline styles all over the place.

I believe proper CSS is a major issue for any HTML based environment. TW2 didn't really do a good job at it and I believe there should be about 10x as much focus on that in TW5. I find that very important.

According to the w3c the placement of a caption is by default as a title. http://www.w3.org/wiki/HTML/Elements/caption ... but it can be placed anywhere using css.

Again, I would expect a caption to only ever be first if I explicitly put it there in my wiki syntax. In all other cases I would expect it last.

6. I merely supplied an example of how to resolve the issue .. once again the rendering needs to be forced into block mode which requires one or two lines added after, this behaviour is different from TWC.

There's a bit too much fiddling right now. The problem with being required to use explicit newlines is not just for appending one after the last row, but also for prepending one to the first. In other word, a tiddler in tw5 may not start with a table right now. These are clearly bugs.

I spent some time this morning coming up with some CSS which will make tables "look" like the TWC version as a gift for you I hope it helps :)

 

Firstly create a new tiddler and tag it with $:/tags/stylesheet which will force it to be used as a stylesheet then add the following.

@@.oldstyle

(put your table here)

@@

I am sorry, but this should not be "oldstyle" — it should be tw5 default-theme-style. What should be there is the option for a theme that looks good and the option for a minimal theme that does not come with any css but rather leaves that for the designer.

As for me, *all* styles should always be bundled in themes, even browser resets! No CSS should ship with the core, except when contained in the theme. Otherwise you are forcing a designer to adapt your pattern.

Best wishes, Tobias.

[David Johnston]

@Tobias: 

I think your ideas are great :) ... Any chance of you putting together an "old style TWC" theme for TW5 to help people migrate forward perhaps? 

It could help significantly with people having issues!

Regards 

David

[Tobias Beer]

As for me, *all* styles should always be bundled in themes, even browser resets! No CSS should ship with the core, except when contained in the theme. Otherwise you are forcing a designer to adapt your pattern.

Addendum: Of course, a browser reset can or should be a separate entity that is being implemented by a theme via transclusion, e.g. at the beginning of the Theme's style sheet, the first line would be something like...

[[BrowserReset]]

Perhaps it's already like that. Sorry, haven't really poked around the TW5 code. High time I get it set up.

- tobias.

[Jeremy Ruston]

Thanks for the useful discussion. I've just pushed some changes to five.tiddlywiki.com:

* Documentation for TableWikiText

* Stylesheet changes to make headers and footers visible

* Changed table width from 100% to auto, with a max-width of 100%

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywikidev.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Jeremy Ruston]

Addendum: Of course, a browser reset can or should be a separate entity that is being implemented by a theme via transclusion, e.g. at the beginning of the Theme's style sheet, the first line would be something like...

[[BrowserReset]]

Perhaps it's already like that. Sorry, haven't really poked around the TW5 code. High time I get it set up.

Yup, it's pretty much like that - see here:

https://github.com/Jermolene/TiddlyWiki5/blob/master/themes/tiddlywiki/snowwhite/base.tid#L54

Best wishes

Jeremy.

 

- tobias.

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywikidev.
For more options, visit https://groups.google.com/groups/opt_out.

[Eskha]

Hi Jeremy,

As far as styles are concerned would it be possible to use twitter bootstrap CSS and derived themes inside TW5 or are there some technical difficulties doing so ?
(btw I think it was an option you mention when you have started TW5, wasn't it ?)

Best regards.

Eskha

[PMario]

On Tuesday, September 17, 2013 9:11:42 AM UTC+2, Eskha wrote:

As far as styles are concerned would it be possible to use twitter bootstrap CSS and derived themes inside TW5 or are there some technical difficulties doing so ?
(btw I think it was an option you mention when you have started TW5, wasn't it ?)

It was part of TW5, but imo it clashed with the structure created by the wikitext renderers. ... For my taste twitter bootstrap is way to bloated allready and it defines a concept, that is very different to TW5. eg: It contains javascript, that handles sliders and tabs. But the TW tab and slider handling is defined in a totally different way. Tabs and sliders will be wikitext not html.

-m

[Eskha]

Thank you for your nice answer.

In fact, what I had in mind was to be able to create a theme (mainly an alternative page template) using CSS elements like the navbar, the span[n], the dropdown menu, the icons, ... from the Bootstrap CSS.
If I understand correctly your answer, I could still be able to do so by building and including a customize version of Bootsrap [1]  which should not override components created by the wikitext renderers. Is it correct ?

Best regards.

Eskha

[1] http://getbootstrap.com/customize/

[Jeremy Ruston]

I did indeed use Bootstrap for an earlier version of TiddlyWiki5. I abandoned it for several reasons:

* Bootstrap markup uses IDs to tie elements together, which doesn't work in dynamic environments like TW5 where it's hard to ensure that IDs remain unique

* As Mario says, the JS code in Bootstrap is useless for TW5 because it doesn't fit into the TW rendering structure

* Bootstrap doesn't (or didn't when I was working with it) permit elements like tabs to be resized

* Bootstrap is incredibly fussy about elements needing to be direct descendants of one another and so doesn't tolerate TW5's additional wrapper elements

* Bootstrap uses Less.css to generate CSS whereas in TW5 it makes more sense to reuse the existing wikitext parsing pipeline

TW5 still uses normalise.css, which is also a part of Bootstrap. It does a great job of smoothing out the differences between browsers

Best wishes

Jeremy

[Eskha]

Thanks Jeremy for the detailed answer.

Eskha