Hi,
I was looking for an ideal solution to create tables, even complex ones, but those in markdown or html have limitations that I don’t like.
I tried to made a css snippet to get tables similar to those in Word, with the possibility of multiple cells per row and multiple cells per column.
I used the callouts and so the result allows me to use the features of Obsidian’s markdown, first of all the folding/unfolding lists (which I use a lot).
I don’t know if there wasn’t already another solution to achieve this result (but I think I’ve been looking for an ideal solution for tables for a long time). Let me know.
I attach here a potentially not entirely bug-free version of the snippet with the premise that I’m a total novice and had to arrange and merge lines taken from various other snippets for reference.
If anyone is interested, I ask you to try the snippet and tell me if there are errors or if it can be written better to avoid incompatibilities (I think I tried it with a clean version of Obsidian).
EXAMPLE
N.B.: to avoid Obsidian messing with nested lists in callouts, only before pasting, make sure you have turned off Smart Lists in Editor (not sure if you are aware of this bug). Immediately after pasting, you can re-enable Smart Lists (the bug only occurs in pasting and sub-callouts).
N.B.2: I suspect that the visual result (particularly the length of the side borders) may vary depending on your screen resolution, but this can be resolved with the adjustments we’ll see later.
N.B.3: the images posted here refer to the Reading mode.
> [!table|col-5|bt|br|bb|bl]+ Some examples of use cases
>
> > [!sblank-1|bt|br]
> > A Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 2. due
> > 3. tre
>
> > [!sblank-1|bt|br]
> > B Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 2. due
> > 3. tre
>
> > [!sblank-1|bt|br]
> > C Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 1. due
> > 2. tre
>
> > [!sblank-1|bt|br]
> > D Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 1. due
> > 1. tre
>
> > [!sblank-1|bt]
> > Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 1. due
> > 2. tre
>
> > [!sblank-3|bt|br] CIAO
> > E Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 1. due
> > 2. tre
>
> > [!sblank-2|bt]
> > F Cont
>
HOW IT WORKS
-
The basic structure is based on a container callout (> [!table|col-x]) that can be set from a minimum of 2 to a maximum of 6 columns (col-2 to col-6).
-
We then proceed to create the cells of the various rows with callouts (> > [!sblank-x]) where x is the span of the cell, from a minimum of 1 to a maximum of 6.
These !sblank-x callout are only-content callaouts (no icon, no title, I just had to adjust some parameters on margins and paddings)
Note: inside the “> [!table|col-x]” between a “> > [!sblank-x]” and another leave a blank line “>”.
So, if we set a [!table|col-3] and we want:
- a row of 3 cells, we’ll add 3 callouts [!sblank-1]; if we’ll add 6 callouts [!sblank-1] we’ll obtain 2 raw of 3 cells, and so on;
- a row of a 1-span cell + a 2-span cell, we’ll add 1 callout [!sblank-1] e 1 callout [!sblank-2].
So a minimum of initial planning is required (what type of [!table|col-x] to use) and then the table is built row by row.
Now comes the part about the cell borders, which took me a bit of playing around with, but I think after a while it becomes very intuitive.
By adding metadatas, after a | , you can draw borders on the 4 outer sides of the entire table (in [!table|col-x]) and on the 4 sides of individual cells (in [!sblank-x]). The border is a solid line of 1px.
The metadata are bt, br, bb, bl, that stand for border top, border right, border bottom and border left.
So a > [!table|col-x|bt|br|bb|bl] will have the border on all the 4 outer side.
Maybe there would be a more elegant solution but having 4 values allows free choice in the design but above all, while writing the snippet, it allowed me to solve at least 2 graphic problems: double borders and short cells next to long cells in the same row.
So my advice is to set the border on the 4 sides of [!table|col-x] with [!table|col-x|bt|br|bb|bl] and then, for the cells, the border on top and on right except for the last cell of a row, with the border only on top.
The result:
As you can see, the first cell has a shorter right border, because the callout content is shorter.
To fix this, you can put a left border on the second cell.
Or, in the first cell you can put dots or spaces (%%spazio%%), to equalize the length.
This solution is not perfect (as you can see, it leaves a gap) but sometimes it is more practical and allows for greater homogeneity in the borders (all br, if you prefer).
MULTIPLE ROWS in a cell
Now, what to do if you want to insert multiple rows into the third cell of the first row?
Just insert sub-callouts inside the third cell callout, with the same span and only border-top.
With this edit…
…you obtain this:
2 row in “F Cont”?
Edit this section…
> > [!sblank-2|bt]
> > F Cont
>
…in:
> > [!sblank-2|bt]
> > F Cont
> > %%spazio%%
> > %%spazio%%
> >
> > > [!sblank-2|bt]
> > > F2 Cont
>
The result:
MULTIPLE COLUMNS in a cell
Now imagine we want the last cell of the first row to be split, I can use, in the [!sblank-1] a new [!table|col-2] and inside this 2 [!sblank-1]. Obviously, I’ll have to adjust the border.
I’ll explain the “no-title1” at the end of the post.
So, this section…
>
> > [!sblank-1|bt|br]
> > D Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 1. due
> > 1. tre
>
> > [!sblank-1|bt]
> > Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 1. due
> > 2. tre
>
> > [!sblank-3|bt|br] CIAO
> > E Lorem ipsum dolor sit amet, consectetur adipiscing elit.
…becomes:
>
> > [!sblank-1|bt|br]
> > D Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> > 1. uno
> > 1. due
> > 2. tre
>
> > [!sblank-1|bt]
> >
> > > [!table|col-2|no-title1]
> > >
> > > > [!sblank-1|br]
> > > > Lorem ipsum. dolor sit amet, consectetur adipis
> > >
> > > > [!sblank-1]
> > > > Lorem ipsum.
> > >
>
> > [!sblank-3|bt|br] CIAO
> > E Lorem ipsum dolor sit amet, consectetur adipiscing elit.
The result:
“F2 Cont” split in 3?
This section…
>
> > [!sblank-2|bt]
> > F Cont
> > %%spazio%%
> > %%spazio%%
> >
> > > [!sblank-2|bt]
> > > F2 Cont
>
…becomes:
>
> > [!sblank-2|bt]
> > F Cont
> > %%spazio%%
> > %%spazio%%
> >
> > > [!sblank-2|bt]
> > >
> > > > [!table|col-3|no-title1]
> > > >
> > > > > [!sblank-1|br]
> > > > > ONE
> > > > > ONE
> > > >
> > > > > [!sblank-1|br]
> > > > > TWO
> > > > > TWO
> > > >
> > > > > [!sblank-1]
> > > > > THREE
> > > > > THREE
> > > >
> > >
> >
>
The result:
About the title of the callout [!table|col-x], I preferred to leave it to be able to give a name to the table and to fold/unfold it.
Adding “|no-title1” you can hide it and, removing “bt” you avoid the double border on top.
So, in the example, editing this:
> [!table|col-5|bt|br|bb|bl]+ Some examples of use cases
In this:
> [!table|col-5|br|bb|bl|no-title1]+ Some examples of use cases
You have:
(In the css snippet, I also added the value “no-title2”, which removes the title but leaves the arrow with the folding/unfolding function).
I attach the .css file (calloutTABLE.css).
I look forward to opinions but, above all, corrections and improvements, if you want. Thanks.
calloutTABLE.css (3.0 KB)