Sample tables in TW5 mall

992 views
Skip to first unread message

David Gifford

unread,
Oct 9, 2013, 7:30:08 PM10/9/13
to tiddl...@googlegroups.com
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

unread,
Oct 9, 2013, 11:00:06 PM10/9/13
to tiddl...@googlegroups.com
Very nice, Dave! Both helpful and well picked designs...

— tobias

Julio

unread,
Oct 10, 2013, 2:21:20 PM10/10/13
to tiddl...@googlegroups.com
Hello Dave,
 
Nice and simple just the way I like tables.
Great stuff.
 
Haved a blessed day,
 
Julio

Stephan Hradek

unread,
Oct 11, 2013, 1:11:48 PM10/11/13
to tiddl...@googlegroups.com
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

unread,
Oct 11, 2013, 2:53:11 PM10/11/13
to tiddl...@googlegroups.com
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

unread,
Oct 17, 2013, 3:37:06 PM10/17/13
to tiddl...@googlegroups.com
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

unread,
Oct 17, 2013, 4:05:09 PM10/17/13
to tiddl...@googlegroups.com
;) 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

unread,
Oct 17, 2013, 6:16:03 PM10/17/13
to tiddl...@googlegroups.com
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

unread,
Dec 20, 2016, 6:00:52 AM12/20/16
to TiddlyWiki
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

unread,
Dec 20, 2016, 8:49:00 AM12/20/16
to tiddl...@googlegroups.com
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.

Boris Budeck

unread,
Dec 20, 2016, 9:50:50 AM12/20/16
to tiddl...@googlegroups.com

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.




--

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.


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
Reply all
Reply to author
Forward
0 new messages