Sample tables in TW5 mall

[David Gifford]

Hi all

Not everyone knows how to format a table in CSS, but would like to be able to have a few table styles to choose from for their TiddlyWikis.

I have added three sample tables at http://www.giffmex.org/tw5mall.htm. Tiddler "Sample ready-made table designs".

The CSS for these tables can be used in either TW classic or TW 5.

Dave

[Tobias Beer]

Very nice, Dave! Both helpful and well picked designs...

— tobias

[Julio]

Hello Dave,

 

Nice and simple just the way I like tables.

Great stuff.

 

Haved a blessed day,

 

Julio

[Stephan Hradek]

Good stuff you did!

I'd like to add something. Feel free to include it in your TidlyWiki.

You write in Add CSS to your tables at  Hijack the exclamation mark to highlight individual cells  "Unfortunately, the table markup for TiddlyWiki 5 doesn't allow you to add CSS inside individual cells. However, if your table doesn't need a header, you can use the exclamation mark (!) to format individual cells in a table instead of using it for the header."

I'd like to show a wqay how you can use BOTH! Headers AND highlighting cells.

For this I "stole" your psychotable:

This is the tiddler content using the psychotable:

|psychotable|k
|!Header one|!Header two|!Header three|
|Cell 1|Cell 2|Cell 3|
|Cell 4|!Cell 5|Cell 6|
|Cell 7|Cell 8|Cell 9|

And here is another "psychotable" with row headers

!Psycho table with Row Headers

|psychotableR|k
|!Header one|Cell 1|Cell 2|Cell 3|
|!Header two|Cell 4|!Cell 5|Cell 6|
|!Header three|Cell 7|Cell 8|Cell 9|

And here is the corresponding CSS:

/*PSYCHOTABLE*/

html body .psychotable tr:first-child th {background-color:#ff0099;}
html body .psychotable td {background-color:#ff9933;}
html body .psychotable {border-color:#ff0033;border-width:10px;}
html body .psychotable th {background-color:#00ff00;}

/*PSYCHOTABLER*/

html body .psychotableR tr th:first-child {background-color:#ff0099;}
html body .psychotableR td {background-color:#ff9933;}
html body .psychotableR {border-color:#ff0033;border-width:10px;}
html body .psychotableR th {background-color:#00ff00;}

You see: It's simply done by adding the pseudo class ":first-child" to either tr or th to distinguish a real header from a highlighted cell.

[David Gifford]

hmmmm, looks interesting! Thanks, I will add it.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/-VAUumD1y1w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
David Gifford
Christian Reformed World Missions, Mexico City

[David Gifford]

Sorry it has taken almost a week, Stephan, but I finally added your table header trick to the TW5 mall. Thanks for that, and I gave you credit for that. Blessings,

Dave

On Fri, Oct 11, 2013 at 12:11 PM, Stephan Hradek <stephan...@gmail.com> wrote:

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/-VAUumD1y1w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

[Stephan Hradek]

;) You even pasted my spelling mistake ;) "wqay" instead of "way".

But why did you not show the example with the normal column headers, just the one with the row headers?

[David Gifford]

Stephan

Heh heh, I saw that wqay and meant to fix it, but then forgot!

As for the other example I misread it. I thought it was just my psychotable for comparison with your fix. Now I see they are two examples of fixes, one with a header row, the other with a header column. I will add that.

Thanks!

On Thu, Oct 17, 2013 at 3:05 PM, Stephan Hradek <stephan...@gmail.com> wrote:

;) You even pasted my spelling mistake ;) "wqay" instead of "way".

But why did you not show the example with the normal column headers, just the one with the row headers?

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/-VAUumD1y1w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

[Boris Budeck]

No longer working under TW5 version 5.1.13. At least it didn't work for me using Firefox. Can someone approve please? Currently no background-color trick described seems to work under TW5.

[David Gifford]

Hi Boris

TW5 mall is really old stuff and I don't really support it anymore, but gladly will try to help you out

1. Try replacing html body in all the lines with html body.tc-body

2. Make sure the Stylesheet's tiddler type is text/css and that it is tagged $:/tags/Stylesheet
3. Make sure you don't have any bad CSS above the stuff that doesn't work.

Dave

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/-VAUumD1y1w/unsubscribe.

To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.

Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/73ae4802-9253-467f-9bda-5b7266497973%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Boris Budeck]

Hi Dave,

 

thank you very much for your help. That did the trick although I had to completely reload TW before seeing the effect.

 

Best regards

Boris

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/73ae4802-9253-467f-9bda-5b7266497973%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

David Gifford
Christian Reformed World Missions, Mexico City

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CANE%3DBFKcvHQmvgKWyq%3DvKnYj-Z12kh2u4i9y21ZUL3bwO3rPVQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

Boris Budeck Marketing & Vertrieb T: 069 8300 898 - 73 F: 069 8300 898 - 0 E: Boris....@xqueue.com

XQueue GmbH Advanced E-Mail-Marketing Technologies Christian-Pless-Str, 11-13 63069 Offenbach am Main www.xqueue.de

Geschäftsführer: Frank Strzyzewski HRB: 12442, Registergericht: Offenbach am Main, USt-Id.Nr.: DE 221794621