Change the background color of one single cell easily

21

Sure, and I do use it all the time. But you often express a strong preference for using built-in wikitext solutions over custom JavaScript whenever possible. I have a similar preference for plain wikitext over HTML whenever possible.

For me, it probably make little sense; it’s a habit from many years of using Markdown, where one of the key benefits is that the source code is extremely readable. This is much less of a concern in TiddlyWiki, where the source code is usually looked at only in order to edit it. But still, when I can, I do so, this is much easier to read in Markdown source than even the best-structured HTML:

| Item              | Count | Unit Price | Total Price |
| :---------------- | :---: | ---------: | ----------: |
| Teddy Bear        |   2   |     24.00  |     48.00   |
| Rubber Ball       |   5   |      2.00  |     10.00   |
| Skateboard        |   1   |     53.00  |     53.00   |

The fairly subtle colon positions in the divider line sets the column text-alignment is useful and unobtrusive, and it would be easy enough to add row attributes, but I can’t think of any unobtrusive syntax to handle cell attributes.

That doesn’t stop me from wanting it! :slight_smile:

That generates this, BTW:

Item Count Unit Price Total Price
Teddy Bear 2 24.00 48.00
Rubber Ball 5 2.00 10.00
Skateboard 1 53.00 53.00



And what a great word, facetious, all the vowels, in order: fAcEtIOUs! Make it facetiously, and we add the “and sometimes ‘y’” as well, also in order..

22

For me it’s a tiddlywiki native over JavaScript, non trivial tables especially dynamic list driven ones. In this case I would propose new wikitext table features except the html tables are not bad and there is dynamic tables plugins.

  • I also favor <hr> over --- for visibility.

I also think html is somewhat native totiddlywiki where JavaScript must follow more integration rules.

I have not tested it but perhaps |.classname would
/Could be made to work as in other cases?

23

I did recently test this, and it doesn’t seem to work, unlike specifying .classname after ol or ul marker or @@ span markup, etc.

24

I’m afraid that even if we could get that to work, it would make writing such tables ugly enough that there is still no advantage over using HTML tags. I’d love to be proven wrong, but I’m skeptical.

25

It’s not possible, because |.class | is a valid table cell value which is “left aligned” and | .class| is right aligned. So the position near the “pipe” | character already has a meaning. So |.class cannot be used anymore.

26

As with other wikitext I would propose the .class is “absorbed”, so one would write |.class centered text | all we would need is an alternate delimiter when we don’t want to separate the class from the space eg if ~ were suitable (perhaps not) |.class~left hand text |

27

another possiblity is

<style>
.mytable td:has(.cell) { 
	background-color: green;
    color: red;
} 

.mytable tr:has(.row) { 
	background-color: yellow;
    color: red;
} 
</style>

|mytable |k
|@@.row @@a1|a2|@@.cell @@a3|
|b1|@@.cell @@ b2 |b3|
|c1|c2|c3|

whiich displays as

image
image115×109 2.42 KB

28

The Raw HTML shows as follows;

<table class="mytable "><tbody><tr class="evenRow"><td><span class=" row "></span>a1</td><td>a2</td><td><span class=" cell "></span>a3</td></tr><tr class="oddRow"><td>b1</td><td align="left"><span class=" cell "></span> b2</td><td>b3</td></tr><tr class="evenRow"><td>c1</td><td>c2</td><td>c3</td></tr></tbody></table>
  • Is this an issue, the spaces around the class names?
29

this is the same as suggested by @Scott_Sauyet above - Change the background color of one single cell easily - #8 by Scott_Sauyet

30

I wonder if we could create some class definitions using the nth row and nth column approach to address cells where the numbers are a field content or variable value?

31

Hi @buggyj,

I transferred your solution to my “own_stylesheets” tiddler to have it available in all of my classes.

table td:has(.green-background) { 
	background-color: green;
} 
table td:has(.yellow-background) { 
	background-color: yellow;
}

Is there a chance to use the pre-defined color names instead of defining them again?

I think for something like @@.color @@ text and than automatically the predefined background color will be used, like red, blue, yellow, etc.

In the meantime I use your solution :smiley:

Stefan

32

Hey stefan, thanks for this! I always wanted to color individual cells.

For headers, I am doing html body.tc-body table th:has(.tancell) {background-color: #cb9;} in the stylesheet and |!@@.tancell your text here@@| and it works great.

33

I added instructions on how to set this up and do it here. The myclass is not necessary.