Skip to content

Style columns of your output by i.e. right-align table columns, add bold or italic font style or color text without the need of a css snippet

Contributed by mnvwvnm

Style dataview table columns

Basic

TABLE 
    publisher,
    developer,
    "<span style='display:flex; justify-content: right;'>" + price + "</span>" AS Price
FROM "10 Example Data/games"

Other style possibilities

For bold, italic, highlighted or strikethrough text, see the first variant.
Underscore text: <span style='text-decoration: underline;'>
Right alignment: <span style='display:flex; justify-content: right;'>
Center alignment: <span style='display:flex; justify-content: center;'>
Make text uppercase: <span style='text-transform: uppercase;'>
Text color: <span style='color: red;'>

Variants

Use bold, italic or highlight text styles

Available styles

You can use every style Obsidian has available this way.

TABLE 
    "_" + publisher + "_" AS Publisher,
    "**" + developer + "**" AS Developer,
    "==" + price + "==" AS Price
FROM "10 Example Data/games"

Style multiple columns

TABLE styleStart + author + styleEnd AS Author, 
    genres, 
    styleStart + totalPages + styleEnd AS "Total Pages"
FROM "10 Example Data/books"
FLATTEN "<span style='display:flex; justify-content: center;'>" AS styleStart
FLATTEN "</span>" AS styleEnd

Use different styles

TABLE greenStyle + author + styleEnd AS Author, 
    genres, 
    rightAlignStyle + totalPages + styleEnd AS "Total Pages"
FROM "10 Example Data/books"
FLATTEN "<span style='color: lightgreen;'>" AS greenStyle
FLATTEN "<span style='display:flex; justify-content: right;'>" AS rightAlignStyle
FLATTEN "</span>" AS styleEnd

Style page link

TABLE WITHOUT ID styleStart + file.link + styleEnd AS "Book", 
    author,
    totalPages
FROM "10 Example Data/books"
FLATTEN "<span style='text-transform: uppercase;'>" AS styleStart
FLATTEN "</span>" AS styleEnd