Quarto now allows HTML Tables with CSS styling to be output in Typst.

It does this by translating CSS properties into Typst properties. You can read about the feature in the Guide .technical details in the Advanced Docs

Let’s look at 6 HTML tables using a variety of CSS properties also supported by Typst in Quarto.

You can click on the links below the examples to see the full documents, with source code.

Confusion Matrix (Pandas / Python)#

This example uses a dashed border to draw attention to two cells.

Typst

HTML

Cars heatmap (gt / R)#

This example uses cell background colors to encode ranges of values.

Typst

HTML

Oceania (Great Tables / Python)#

Borders can show the structure of grouped rows.

Typst

HTML

Islands (gt / R)#

Font sizes and minimal borders make this table stand out.

Typst

HTML

Solar Zenith (Great Tables / Python)#

Another cool heatmap.

Typst

HTML

Acting on Data (Pandas / Python)#

Applying colors and transparency based on data.

Typst

HTML

We can’t wait to see what you do with this new feature!