Table Formatting Help

Help
1

What I’m trying to do

I used TiddlyWiki (classic) for decades for my business notes. But modern browsers don’t like saving changed files to disk. I really like Obsidian but the only tables I’ve been able to make are so … primitive. The plugin “Advanced Tables”, really is not advanced (OK sorting is neat). I want to be able to have the headers center justified, the columns left justified, insert note links and outside links, insert a photo in a cell, merge two cells, etc. Is this just not possible with MD or Obsidian?

2

Some of it are possible, but not all of it:

  • merging of cells – Not doable
  • Links – They take up space, but is doable. Using reference style links can be an advantage
  • Images in cells – If not in a query, it’s just to do an embedded imaged. Using dataview queries, it can be a little finicky, but some get it to work
  • Cell justification – Using :--- as the cell divider, the cells can be left justified
  • Header justification – Not directly from Markdown, AFAIK, but you can use cssClass: someClass, and then add CSS to style them accordingly

Another rather neat trick related to styling of cells, involves adding extra code to the cell to make it targetable by CSS. If you add something like <mark class="myClass"></mark> (or similar using <span>), you can then later on use CSS selectors resembling td: has(.myClass) to target that cell, or tr: has(.myClass) to target the row with the markup, and so on.

Here is an example of most of this from my test vault:

| Left                 |    Center     |                Right |
|:-------------------- |:-------------:| --------------------:|
| left                 |    center     |                right |
| just-a-little-longer | [[Something]] | just-a-little-longer |
| ![[EBuJo.png\|100]]  |  [A link][1]  |  ![[EBuJo.png\|100]] |

[1]: https://www.google.com

Which displays as (using Minimal theme):
image

(Update: The Advanced tables plugin does also allow for calculation to be done within the tables, and it adjusts the table columns while you’re editing the tables, so it’s not just a sorting extension. And it allows for easily adding/removing of columns and rows )

1 Like
3

Yes, I do know you can justify the whole column; left, right or centered. But, say I want the header row to be centered, and the column under that centered header to be left justified.

4

I’ve not seen that MD, is the |100 scaling the image?

5

You would justify the column with :-- syntax, and use CSS for the header.

The |100 denotes scaling down to 100px wide. Can also use |200x70 to give both width and height.

6

I did not know I could use CSS within Obsidian. So, that’s a whole new area for me to look into. On a similar vane, can I insert html code snippets within a file? Something like;
html font color=“red” IMPORTANT /font /html
I didn’t know how the escape the opening and closing delimiters so imagine they are there :slight_smile:

7

If you want you can do stuff like <em>italics</em>, or more useful: <span style="color: red">red text</span> . Do however be aware that within the html tags, ordinary markdown will not be applied. So doing <span>red [[Something]] text</span> will not work in live-preview, but it’ll work in reading mode.

So I tend to avoid html tags as much as I can, and try to rely on pure markdown. In some cases, I do however use some html to extend and increase the possibilities for layout/logic/…

8

So, I could use html to do have the text presented in say 2-columns.
I looked, but didn’t see in the Obsidian docs about including <html> (got the escape working :slight_smile: )
Can anyone tell me where that little gem is in the documentation?