tables: merging cells (row- and colspan)

527 views
Skip to first unread message

FND

unread,
May 22, 2007, 4:08:17 AM5/22/07
to Tiddl...@googlegroups.com
Hey all,

I just tried creating a simple 2D coordinate system, like this:

|
Remote |
|
Co-Located |
|_____________________________
Synchronous Asynchronous

That's basically a 3x3 table, whereas the four cells in the upper right
need to be merged.

However, it seems that using both colspan and rowspan at the same time
is not possible:

|!Remote|>||
|!Co-Located|~||
|!|!Synchronous|!Asynchronous|

The colspan (">") works, but the rowspan ("~") is being ignored.

Will I need to use raw HTML?


Thanks,

F.

Oscar

unread,
May 22, 2007, 8:43:23 AM5/22/07
to TiddlyWiki
I tried a bit:
except for an ugly blank column at the end of the diagram this seems
working:

|!Remote|>||
|!Co-Located||~|
||Synchronous|Asynchronous|

please note that if you want sync/asyns in bold and coloured
background you have to put them above:

|!|!Synchronous|!Asynchronous|
|!Remote|>||
|!Co-Located||~|

or define the cells:

|bgcolor(color):Synchronous|

hope to be helpful,
Oscar

FND

unread,
May 22, 2007, 9:09:55 AM5/22/07
to Tiddl...@googlegroups.com
> except for an ugly blank column at the end of the diagram this seems
> working: [snip]

Thanks Oscar, that's an interesting hack.
I've been able to somewhat mitigated the "ugly blank column" issue:

|!Remote|>||border(none):|
|!Co-Located||~|border(none):|
|!|!Synchronous|!Asynchronous|border(none):|

That's still not good enough, so I've come up with this alternative:

|!Remote|border(0):|border(0):|
|!Co-Located|border(0 0 1px 0):|border(0 0 1px 0):|
|!|!Synchronous|!Asynchronous|

It's still not perfect though (notice the mysteriously missing vertical
line between "Synchronous" and "Asynchronous"), so I'll have to decide
which of those hacks I'm gonna use.


-- F.

FND

unread,
May 22, 2007, 11:43:09 AM5/22/07
to Tiddl...@googlegroups.com
And yet another alternative:

<html><style type="text/css">
#tiddlerMyTiddler table {
margin: 0 1em;
}

#tiddlerMyTiddler table,
#tiddlerMyTiddler table * {
border: 0;
}

#tiddlerMyTiddler td {
padding: 5px;
font-weight: bold;
}
</style></html>
|border-right(1px solid #000):text-align(right):Remote|>||
|border-right(1px solid #000):text-align(right):Co-Located|~||
|border-right(1px solid #000):border-top(1px solid #000):|border-top(1px
solid #000):Synchronous|border-top(1px solid #000):Asynchronous|
|Time/Space Matrix|c

(This is assuming a tiddler called "MyTiddler".)


-- F.

Reply all
Reply to author
Forward
0 new messages