Custom CSS for tables - 5 New styles, ready to use in your notes

Hi @DeaconLight

I wanted to create an official looking food label in Obsidian, with just markdown tables. Had no idea where to start because I didn’t know what selectors there are for markdown tables. Then I stumbled upon this post of yours and I downloaded your files.

I could not have pulled this off without your well documented css file and examples. I adapted your yellowCab css extensively to re-create the original foodlabel I found as an image. I think I did a pretty good job, thanks to your examples.

I just used another font than the real label does. I don’t like Arial etc and use Avenir Next in my entire vault. But if someone wanted to, they could of course adapt the CSS and use another font.

I’ll attach my adapted CSS and the the 07 - Nutrition Facts.md file plus the foodlabel photo and a screenshot of my pure Markdown table + CSS Nutrition Facts FoodLabel.

Kind regards,

Fieke

Attachments:

nutFact_tableStyles.css (9.2 KB)

07 - Nutrition Facts.md (1.6 KB)


This is a picture of a real FoodLabel


This is a screenshot of my pure Markdown Table & CSS FoodLabel

32 Likes